webpack模块打包工具（后续会更详细的更新内容）

<1>基本配置

·指定目录下 npm init

·npm install webpack --save-dev

·npm install webpack-cli --save-dev

·配置package.json：

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  },

·配置webpack.config.js:

const path = require("path"); //Node.js内置模块

module.exports = {

    entry: './src/index.js', //配置入口文件

    output: {

        path: path.resolve(__dirname, 'dist'), //输出路径，__dirname：当前文件所在路径

        filename: 'main.js' //输出文件

//publicPath: ‘http://cdn.com/’ 配置后上线打包的文件路径

    }

}

·根目录下创建src以及src/index.js入口文件，将会打包成dist/main.js

·打包默认文件命令：

npm run dev

·打包不是默认文件使用命令：

npx webpack ./demo.js -o demo.bundle.js --mode development

·自动打包命令：

npx webpack --mode development --watch

<2>loader

·创建css文件，以及 npm install css-loader style-loader --save-dev

·配置webpack.config.js：

module:{

        rules:[

            {

                test: /\.css$/,

                use:['style-loader','css-loader']

            }

        ]

    }

·引入css文件，require(‘./style.css’)

·引入js文件，require(‘./world.js’)

<3>自动化生成HTML页面，监听index.html变化（不需要手动引入打包后的js入口文件）

·安装插件 npm install html-webpack-plugin --save-dev

·webpack.config.js中require插件

·在module中添加配置：

plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'index.html'

        })

    ]

·额外的html-webpack-plugin属性：

plugins: [

        new htmlWebpackPlugin({

            //指定需要转换的模板页面

            template: path.join(__dirname, './index.html'),

            //文件名和路径

            filename: 'index.html',

            //script标签在head中展示，默认body

            inject: 'head',

            //需要上线的话，可以利用这个属性压缩html文件，删除注释、空格等等

            minify: {

                removeComments: true,

                collapseWhitespace: true

            }

        })

    ]

<5>多页应用：

·创建相应的js入口文件，例如： src/a.js、src/b.js、src/c.js以及需要用的主模板index.html

html中的页面可以使用webpack.config.js中htmlWebpackPlugin自定义的变量来区分打包后的页面，因为使用同一份模板index.html：

<title><%= htmlWebpackPlugin.options.title %></title>

·配置entry和output：

const path = require("path");

module.exports = {

    entry:{

a: './src/a.js',

b: './src/b.js',

c: './src/c.js',

}

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '[name].js' //使用[name]来根据js文件名的不同打包成相应名称文件

    }

}

·配置plugins：

plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'a.html',

            title: 'this is a html',

Chunks: [‘a’] //利用Chunks指定要包含的打包后的JS入口文件，打包后的a.html页面就不会引入其他打包的js入口文件

        }),

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'b.html',

            title: 'this is b html'

excludeChunks: [‘a’, ‘c’] //利用excludeChunks指定·不包含·的打包后的JS入口文件

        }),

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'c.html',

            title: 'this is c html',

Chunks: [‘c’]

        })

    ]

<6>babel：

·babel允许我们完全以ES6/ES7规范来写js代码，同时编译成es5地代码，以便最终可以在当前并未实现es6规范的浏览器上运行

·babel的安装：

npm install --save-dev babel-loader @babel/core

·webpack.config.js配置引入module的rules：

module: {

  rules: [

    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

  ]

}

·presets插件：preset插件告诉babel-loader需要转换成什么样的js语法，主流浏览器基本都实现了对es2015的支持，但是对es2016大都不支持，所以需要presets转成浏览器能够解析的es2015语法

npm install @babel/preset-env --save-dev

·配置presets：创建.babelrc文件定义一个JSON对象  {“presets: [“@babel/preset-env”]}