Webpack：從 v3 升級到 v4

這篇指南僅僅展示了影響用戶使用的主要改變。更多細(xì)節(jié)查看 更新日志(the changelog)。

Node.js v4

如果你正在使用 Node.js 的 V4 或 V4 以下版本，需要更新你的 Node.js 至 V6 或者更高版本

更新 Node.js 版本的說明見 這里。

腳手架（CLI）

腳手架 (CLI) 已經(jīng)放至一個單獨(dú)的 webpack-cli 中。在你使用 webpack 之前需要安裝它，參見基礎(chǔ)步驟.

安裝指南見這里。

更新插件

為了兼容 webpack4，許多第三方插件需要更新至最新版本。

模式（mode）

在你的配置中添加新的 ?模式 （mode）? 選項。設(shè)置它為 ?'production'?, ?'development'? or ?'無 (none)'?

webpack.config.js

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

注：?'development'? 模式和 ?'production'? 模式的用途不同。你可以使用 操作指南 中的 ?webpack-merge? 來優(yōu)化配置。

不推薦或被移除的插件

生產(chǎn)模式中已經(jīng)默認(rèn)集成了部分插件，這部分默認(rèn)插件可以在配置中被移除：

webpack.config.js

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

在開發(fā)模式中，這些插件已默認(rèn)安裝

webpack.config.js

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

這些插件不推薦并且現(xiàn)在已經(jīng)刪除

webpack.config.js

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

CommonsChunkPlugin

?CommonsChunkPlugin? 已被移除?？梢允褂?nbsp;?optimization.splitChunks? 來代替。

查閱 optimization.splitChunks 文檔了解更多相關(guān)細(xì)節(jié)。其默認(rèn)配置可能已經(jīng)滿足你的需求。

注：當(dāng)計算生成 HTML 時，你可以使用 ?optimization.splitChunks.chunks: "all"?， 該優(yōu)化配置在較多項目中被使用。

import() 和 CommonJS

在 webpack 4 中，當(dāng)使用 ?import()? 去加載非標(biāo)準(zhǔn) ESM 時，其值已經(jīng)被加載. 現(xiàn)在你需要通過 ?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

當(dāng)使用自定義 loader 去轉(zhuǎn)化 ?.json? 文件時，你需要更改模塊中的 ?type?:

webpack.config.js

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

仍在使用的? json-loader? 可從項目中移除。

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

module.loaders

自 webpack 2 后 ?module.loaders? 不推薦使用，目前其已被移除，并推薦使用 module.rules。

Further Reading

• To v2 or v3 from v1
• RIP CommonChunkPlugin
• webpack 4: migration guide for plugins/loaders