webpack4迁移

从V3到V4

Node.js v4

如果你在使用Node.js v4或者更低的版本，你需要升级你的node版本到v6或者更高。

CLI

webpack脚手架webpack-cli已经从webpack中独立出来，使用webpack时需要install webpack-cli。

插件的升级

很多第三方的插件需要升级到它们的最新版本才能兼容使用。

Mode

webpack4新增了mode模式在配置中，可以设置为"production"或者”development“。

module.exports = {
mode: 'production',
}

或者可以使用CLI进行设置模式，在scripts中的命令中加上：--mode production或者--mode development。

弃用/被移除的plugins

下面的插件在配置中被移除，因为在生产模式中是默认添加了的。

module.exports = {
  // ...
  plugins: [
-    new NoEmitOnErrorsPlugin(),
-    new ModuleConcatenationPlugin(),
-    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
-    new UglifyJsPlugin()
  ],
}

下面的这些插件在开发环境模式下是默认的

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}

webpack4废弃的插件有：

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}

CommonChunkPlugin

CommonChunkPlugin被移除，替代它的是optimization.splitChunk。
一般设置，在大多数情况下是最佳设置：

optimazation: {
   splitChunks: {
       chunks:'all'
  }
}

import{} 和 CommonJS

当使用import（）加载非ESM(ECMA Script Module，ES标准模块)时，webpack4必须使用default属性去获取module.exports的返回值；

non-esm.js

module.exports = {
  sayHello: () => {
    console.log('hello world');
  }
};

example.js

function sayHello() {
  import('./non-esm.js').then(module => {
    module.default.sayHello();
  });
}

json和loaders

webpack4针对json-loader已经移除，可以不需要针对.json格式文件进行loader转换。
使用自定义loader进行转换.json文件时，需要更改module类型：

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    },
 {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

moudle.loaders

自wepack2以后loader的写法都在module.rules，webpack4也是如此。

赞赏码.jpg