webpack4

Install

If you need to use webpack 4, you need next to install from the branch:

// yarn
yarn add webpack@next webpack-cli --dev

// npm 
npm install webpack@next webpack-cli --save-dev

Incomplete Migration Guide North

environment

Node.js 4 is no longer supported.

According to the package.json configuration, the minimum supported version of Node.js is 6.11.5

module type

Before webpack 4, js was the only module type in webpack and thus couldn't package other types of files efficiently. And webpack 4 provides 5 module types:

javascript/auto: (default type in webpack 3) supports all JS module systems: CommonJS, AMD, ESM
javascript/esm: EcmaScript module, not available in other module systems (default .mjs file)
javascript/dynamic: Only CommonJS & AMD are supported, EcmaScript modules are not available
json : JSON formatted data that can be passed require and imported (defaults to a file)import.json
webassembly/experimental: WebAssembly module (experimental, defaults to .wasm file)

In addition, webpack 4 will resolve files .wasmwith , .mjs, .js and .json suffixes by default.

In the loader configuration of the corresponding file, you need to add a type field to specify the module type:

 module: {
    rules: [{
        test:/\.special\.json$/, 
        type: "javascript/auto",
        use: "special-loader"
    }]
 }

javascript/auto / javascript/esm can handle ESM, but the latter will be stricter:

The imported name must exist in the imported module
Dynamic modules (non-ESM, such as CommonJS) can only be import imported by default, and other methods (including namespaces) will report errors

For WebAssembly modules:

Can import other modules (JS and WASM)
Attempting to import a non-existing module in a WASM module will result in a warning or error
ESM can import module names exported in WASM modules
Only available in async chunks (via import() imported modules), invalid in initial chunks (not good for improving web application performance)

`import()`: dynamic import

在 webpack 4 中，import() 会返回一个带命名空间(namespace)的对象，这对 ES Module 不会有影响，但对于遵循 commonjs 规范的模块则会加一层包裹：

// webpack 2/3
import("./commonjs").then(exports => {
	...
})

// webpack 4
import("./commonjs").then({default: exports}=> {
	...
})

`mode`: 模式配置

mode 是 webpack 4 中新增加的参数选项，其有两个可选值：production 和 development。mode 不可缺省，需要二选一：

production 模式：
- 默认提供所有可能的优化，如代码压缩/作用域提升等
- 不支持 watching
- process.env.NODE_ENV 的值不需要再定义，默认是 production

   /** webpack.production.config.js **/
   // webpack 2/3 
   module.exports = {
       plugins: [
        new UglifyJsPlugin(/* ... */),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
       ]
     }
     
   // webpack 4  
   module.exports = {
   	mode: 'production'
   }

development 模式：
- 主要优化了增量构建速度和开发体验
- process.env.NODE_ENV 的值不需要再定义，默认是 development
- 开发模式下支持注释和提示，并且支持 eval 下的 source maps

   /** webpack.development.config.js **/
   // webpack 2/3 
   module.exports = {
       plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
       ]
     }
     
   // webpack 4  
   module.exports = {
   	mode: 'development'
   }

此外, webpack 4 还提供一种隐藏(none)模式，这种模式下会禁用一切优化

sideEffects 设置

webpack 4 在 package.json 中引入了对 sideEffects: false 的支持。当模块的 package.json 中添加该字段时，表明该模块没有副作用，也就意味着 webpack 可以安全地清除被用于重复导出(re-exports)的代码。

JSON

webpack 4 不仅支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时，webpack 会消除掉JSON Module 中未使用的导出。

此外，如果要用 loader 转换 json 为 js，需要设置 type 为 javascript/auto：

module.rules: [
	{
	  test: /\.special\.json$/,
	  type: "javascript/auto",
	  use: "special-loader"
	}
]

配置

删除了一些常用内置插件：
- NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式默认)
- ModuleConcatenationPlugin -> optimization.concatenateModules （生产模式默认）
- NamedModulesPlugin -> optimization.namedModules （开发模式默认）。
- 删除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk，这提供了细粒度的缓存策略控制
可以使用 module.rules[].resolve 来配置解析，它会与全局配置合并。
optimization.minimize 用于控制 minimizing 的开关。生产模式默认为开，开发模式默认为关。
optimization.minimizer 用于配置 minimizers 和选项。
许多支持占位符(placeholders)的配置选项现也支持函数形式
错误的 options.dependencies 配置将报错
sideEffects 可以通过 module.rules 覆盖
output.hashFunction 可以是一个构造函数，用于自定义 hash 函数。处于性能考虑，也可以提供非加密哈希函数
output.globalObject 可以用于配置运行时的全局对象引用
默认配置
- webpack 默认会按照 .wasm, .mjs, .js 和 .json 的扩展名顺序查找模块。
- output.pathinfo 在开发模式下默认是打开的
- 生产环境下，默认关闭内存缓存
- entry 的默认值是 ./src，output.path 的默认值是 ./dist
- 在选择模式选项时，默认值是 production

优化

uglifyjs-webpack-plugin 发布 v1，支持 ES2015
使用 JSONP 数组来代替 JSONP 函数 –> 异步支持
webpack 自身也可以删除无用代码。webpack 2/3 中是在 Uglify 时删除无用代码，webpack 4 中 webpack 也可以(在某些情况下)删除无用代码，避免 import() 引用无用代码时导致的奔溃
作用域提升后的模块将生成更少的代码

性能

默认情况，UglifyJS 会默认缓存和并行化(完全实现缓存和并行化将在 webpack 5 中实现)
多个性能改进，尤其是在增量构建这方面
改进了 RemoveParentModluesPlugin 的性能
未使用模块不再有非必要的作用域提升
Add ProfilingPlugin, this plugin will (in Chrome browser) create a file containing the time consumption of each plugin
for of substitute forEach; Map/Set substitute Objects; includes substitute indexOf
The same task will only enter the queue once

A complete list of performance improvements and optimizations can be found in Release 4.0-beta.0

removed features

removed module.loaders
removed loaderContext.options
removed Compilation.notCacheable
removed NoErrorsPlugin
removed Dependency.isEqualResource
removed NewWatchingPlugin
removed CommonsChunkPlugin

Reprinted from: https://github.com/dwqs/blog/issues/60