webpack 配置参数说明

 

 

 

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

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

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

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

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

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

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

 

loader的执行顺序：

一般情况下，loader的执行顺序为从右往左，从下往上。
可以通过enforce属性去改变执行顺序。
enforce:‘pre’ 前置 权重最高
enforce:‘normal’ 不变 权重第二
enforce:‘inline’ 行内 权重第三
enforce:‘post’ 后置 权重第四

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'loader3'
                },
                enforce: 'pre'
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'loader2'
                }
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'loader1'
                }
            }
        ]
    }

上面的执行顺序就是 loader3、loader1、loader2