webpack3的新特性

前言

webpack4都发布一年多了，为啥还要写webpack3的博客呢？因为只有更了解 webpack3 有哪些新功能，才能知道 webpack4 在 webpack3 的基础上又哪些优化。

目录结构

.
├── dist
│   └── bundle.js
├── package.json
├── src
│   ├── index.js
│   └── string.js
├── webpack.config.js
└── yarn.lock

webapck3新特性

webpck3 主要有2个新特性

• Scope Hoisting （作用域提升）
• Magic Comments （魔法注释）

Scope Hoisting

在 webpack3 之前打包都会将每个模块打包到自己的闭包函数中，整体增加了打包后 js 文件的大小，且增加了浏览器运行 js 的时间。然 webpack3 参考了 Closure Compiler 和 RollupJS 这样的工具，将所有模块打包后放置到一个闭包函数中，从而减少了打包后文件大小，减少了浏览器运行耗时。

安装 webpack3

yarn add webpack@3.0.0 -D

在 package.json 中添加脚本

"scripts": {
  "build": "webpack -p --config webpack.config.js",
  "build:dev": "webpack --config webpack.config.js"
}

webpack.config.js 配置文件

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

index.js

import sayHello from './string'
sayHello()
var t = Date.now()
var a = 1
var b = 2
var c = 3
var d = a + b + c
console.log(t, '**************', d)

string.js

export default function () {
  return 'hello world'
}

执行打包命令 yarn build:dev

可以观察到上图有2个闭包函数，分别对应2个模块 index.js 和 string.js

执行打包命令 yarn build

虽然并没有打印 index.js 中 sayHello() 函数的值，但打包后文件 bundle.js 中依然有模块 string.js 的代码。

使用作用域提示，在 webpack.config.js 添加如下配置

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

执行打包命令，yarn build:dev

可以观察到，此时只有1个闭包函数了，这就是 webpack3 提供的新插件达到作用域提升的效果。
执行打包命令，yarn build

可以观察到，webpack3 巧妙的计算了需要打印的变量的值，去除了变量 a、b、c、d，进一步精简了代码。

Magic Comments

在 webpack3 中可以在动态导入 import() 语法中以注释的方式命名 chunk 代码块的的名称。
语法如下：

import(/* webpackChunkName: "my-chunk-name" */  'module');

添加 chunk 配置
webpack.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].chunk.js'
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

index.js

import(/* webpackChunkName: "string" */'./string').then(function(res){
  console.log(res)
})
var t = Date.now()
var a = 1
var b = 2
var c = 3
var d = a + b + c
console.log(t, '**************', d)

执行打包命令，yarn build
此时目录结构为：

.
├── dist
│   ├── bundle.js
│   └── string.chunk.js
├── package.json
├── src
│   ├── index.js
│   └── string.js
├── webpack.config.js
└── yarn.lock

总结

1. 在使用 webpack3 时，添加上作用域提升的 ModuleConcatenationPlugin 插件能进一步精简打包后的代码
2. 魔法注释可以分割代码块，并实现懒加载。

参考

https://zhuanlan.zhihu.com/p/27474985
https://jdc.jd.com/archives/212653