webpack 常用配置

一、前言

webpack是目前前端开发中最流行的打包工具，不仅能实现 JS 打包，还能将 CSS 文件，图片文件，甚至是 LESS 文件打包，每一个文件都是一个独立的模块，并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。

二、常用 webpack 配置如下

module.exports = {
        entry: './src/index.js',
        output:{
            filename:'bundle.js',
            path:path.resolve(__dirname,'dist')
        },
        module:{
            rules:[
                  {
                    test: /\.js$/,
                    loader: 'babel-loader?cacheDirectory=true',
                    include: [
                      resolve('src'),
                    ],
                    exclude:path.resolve(__dirname, 'node_modules')
                 },
                {
                    test:/\.css$/,
                    use:[
                        'style-loader',
                        'css-loader',
                        'postcss-loader'

                    ]
                },{
                    test:/\.(png|svg|jpg|gif)$/,
                    loader: 'url-loader',
                    options: {
                      limit: 10000,
                      name: utils.assetsPath('img/[name].[hash:7].[ext]')
                    }
                }
            ]
        }
    }

三、配置参数说明

mode：两种 mode 模式可供选择，一种是开发环境，命令为 webpack --mode = development，打包出来的文件未经过压缩；一种是生产环境，命令是 webpack --mode = production ，打包出来的文件是经过压缩的。

entry：资源入口文件，所有的资源最后会打包成一个 JS 文件。

ouput：打包之后存放的文件路径。path 为相对路径，filename 为打包后的文件名。

module：rules 配置编译规则，test 正则匹配，exclude 排除特定条件，use-loader，test 匹配到的解析器模块，use-options，与use-loader配合使用。

plugins：插件。plugins 与 loader 的区别在于，loader 只是一个解析模块，比如将 ES5 解析成 ES6，LESS 文件解析成 CSS 文件，为了兼容浏览器。而 plugins 是将 loader 之后的文件进行优化分类、压缩、提供公共代码等。

devServer：服务器配置，contentBase 文件路径，compress 是否启动 gzip 压缩，host 主机地址，port 端口号，publicPath。

四、常用 plugins

1. extract-text-webpack-plugin 与 mini-css-extract-plugin

分离 .css 分解，后者需要 webpack 4.2.0 版本以上。

2. UglifyJsPlugin

压缩 js 文件，减小 js 文件。

3. html-webpack-plugin 与 html-loader

生成 html 文件。

4. clean-webpack-plugin

每次构建之前清理历史打包文件。