以下展示2.x 配置文件信息
v1 迁移至 v2 官方有更详细的说明
具体详见 https://webpack.js.org/guides/migrating/
只列举常用到参数进行描述, 或者我在使用中遇到的 也会不定时更新
一些 2.x 的改变
-
module.loaders -> module.rules
//v1.x module使用loaders来配置加载器 module:{ //加载器配置 loaders: [ // test 通过正则表达式去匹配不同后缀的文件名 // loader 选择当前文件要使用的加载器, 如果要使用多个加载器用 ! 连接 { test: /\.js$/, loader: 'babel-loader?presets[]=es2015' }, { test: /\.less/, loader: 'style-loader!css-loader!less-loader'} ] },
//v2.x module中的loaders 替换成了 rules module:{ //加载器配置 rules: [ { test: /\.js$/, use:[ { loader: 'babel-loader', options: { presets: ['es2015'] } ] }, { test: /\.less$/, // use 第一种写法 // 使用 use 来管理所使用使用的 多个 loader // 不需要再使用 ! 来拼接, 使得更容易区分, 每个 loader 都是一个对象 use:[ // 如果需要多个loader { loader: 'style-loader' }, { loader: 'css-loader', options:{ modules: true } }, { loader: 'less-loader' }, ], // use 第二种写法 use: [ "style-loader", "css-loader?modules=true", "less-loader" ] }, ] },
-
删除了自动追加 -loader 模块的扩展名
在写入配置时 -loader 不可省略
如若还是使用以前的配置, 可以配置 resolveLoader.moduleExtensions 来实现
但官方并不建议这样使用module: { rules: [ { test: /\.less$/, use: [ "style", "css", "less", ] } ] }, resolveLoader: { moduleExtensions: ["-loader"] }
-
json-loader is not required anymore
如果当前配置文件没有为 json 写入配置, webpack会自动尝试加载 json-loader