专栏首页Young Dreamerwebpack3新特性简介

webpack3新特性简介

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

升级到webpack3

升级到webpack3,只需要通过npm安装即可:

npm install webpack@3.0.0 --save-dev

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

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处理后的每个模块均被一个函数包裹,如下:

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

/***/ }),

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

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

webpack3通过设置ModuleConcatenationPlugin使用这个新特性:

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

产出对比图如下:

 图a:webpack2下的产出文件部分内容   

图b:webpack3下的产出文件部分内容

 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 模块支持
  • 提升用户体验

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack中tree-shaking技术介绍

    之前介绍过webpack3的新特性,里面提到webpack2支持了ES6的import和export,不需要将ES6的模块先转成CommonJS模块,然后再进行...

    用户1217459
  • webpack务虚扫盲

    打包工具的角色 所谓打包工具在web开发中主要解决的问题是: (1)文件依赖管理。毕竟现在都是模块化开发,打包工具首先就是要梳理文件之间的依赖关系。 (2)资源...

    用户1217459
  • webpack4:连奏中的进化

    用户1217459
  • webpack4.0各个击破(10)—— Integration篇

    webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

    大史不说话
  • Webpack系列-第一篇基础杂记 前言简介配置实践&优化总结

    公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,...

    菜的黑人牙膏
  • 2-3 webpack的正确安装方式

    webpack是基于node开发的环境打包工具。首先需要安装node环境。 进入node官网,尽量安装最新版本的稳定版node。因为提高webpack打包速度...

    love丁酥酥
  • Webpack 4正式发布!从0配置到生产模式,你需要知道的都在这里了

    为中大型项目提供webpack的配置并不是什么大问题。 然而,对于较小的项目来说,这很麻烦,特别是当你想要启动一些玩具应用时。

    疯狂的技术宅
  • webpack安装异常

    webpack中文指南:https://zhaoda.net/webpack-handbook/index.html

    Dawnzhang
  • 快速了解 前端打包 webpack

    webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始,可以不用引入一个配置...

    王念博客
  • 【先行者】webpack学习笔记(节选)

    在打包的时候,输入 webpack --model=development或production,

    web前端教室

扫码关注云+社区

领取腾讯云代金券