webpack3新特性简介

时间 2019-11-17

标签 webpack3 webpack 特性简介繁體版

原文原文链接

6月20号webpack推出了3.0版本，官方也发布了公告。根据公告介绍，webpack团队将将来版本的改动聚焦在社区提出的功能需求，同时将保持一个快速、稳定的发布节奏。本文主要依据公告内容，简单介绍一下webpack3的新特性，以及在实际项目中的应用。javascript

升级到webpack3

升级到webpack3，只须要经过npm安装便可：html

npm install webpack@3.0.0 --save-dev

webpack3几乎与webpack2完美兼容，除了会影响一些插件的使用，官方给出的数据是：98%的用户升级后，没有影响webpack功能的正常使用。升级的时候可能会有一些相关的warning，可是通常不影响使用。java

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN html-webpack-plugin@2.28.0 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

webpack3新特性

（1）Scope Hoisting-做用域提高

在以前的一篇文章webpack扫盲篇介绍过，webpack2处理后的每一个模块均被一个函数包裹，以下：webpack

/* 50 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
    window.lib = {}
    ...    
/* harmony default export */ __webpack_exports__["a"] = (window.lib);

/***/ }),

这样会带来一个问题：下降浏览器中JS执行效率，这主要是闭包函数下降了JS引擎解析速度。web

因而webpack团队参考Closure Compiler和Rollup JS，将一些有联系的模块，放到一个闭包函数里面去，经过减小闭包函数数量从而加快JS的执行速度。npm

webpack3经过设置ModuleConcatenationPlugin使用这个新特性：浏览器

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

产出对比图以下：缓存

图a：webpack2下的产出文件部份内容 bash

图b：webpack3下的产出文件部份内容babel

Scope Hoisting是基于ES Module的，对于Common.js和AMD的模块不适用，不适用的状况下仍采用webpack2的模式。

（2）Magic Comments

在webpack2中引入了Code Splitting-Async的新方法import()，用于动态引入ES Module，webpack将传入import方法的模块打包到一个单独的代码块（chunk），可是却不能像require.ensure同样，为生成的chunk指定chunkName，所以在webpack3中提出了Magic Comment用于解决该问题，用法以下：

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

webpack的将来

想了解webpack的将来，建议先过一下webpack的历史。

webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐获得普遍应用。

webpack2相对于webpack最大的改进就是支持ES Module，能够直接分析ES Module之间的依赖关系，而webpack1必须将ES Module转换成CommonJS模块以后，才能使用webpack进行下一步处理。除此以外webpack2支持tree sharking，与ES Module的设计思路高度契合。

webpack3相对于webpack2，过渡相对平稳，可是新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；

总之，webpack的将来确定是围绕ES的支持度、构建速度与产出代码的性能和用户体验来建设的，同时webpack的团队已经承诺会根据社区的投票来决定新特性开发优先权。如下是公告中给出的将来的重点关注点：

高性能的构建缓存
提高初始化速度和增量构建效率
更好的支持Type Script
修订长期缓存
支持WASM 模块支持
提高用户体验