webpack 2.x 配置

以下展示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