6月20号官方发布了公告, webpack推出了3.0正式版。

作为一个版本控, 有新版本出来, 肯定是要试一试的.

如何升级?

1. 如果是用yarn, 那么升级很简单, 执行命令yarn upgrade-interactive, 然后选择需要升级的模块即可

2. 如果是用npm, 执行以下命令:

   npm install webpack@3.0.0 --save-dev
   npm install html-webpack-plugin@2.29.0 --save-dev
   npm install extract-text-webpack-plugin@3.0.0-beta.3 --save-dev
   

   extract-text-webpack-plugin还是继续用现在的2.x, 也没有什么问题

webpack3 有什么新特性?

1. Scope Hoisting-作用域提升

简单来说, 就是将一些有联系的模块，放到一个闭包函数里面去，通过减少闭包函数数量从而加快JS的执行效率

想要到该功能, 需要添加插件ModuleConcatenationPlugin:

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

这是官方给出的图, main.js接近小了一半, 不过在自己项目中, 好像并没有多大的效果...

注意: 是基于ES Module的，对于Common.js和AMD的模块并不适用，不适用的情况下仍采用webpack2的模式

2. Magic Comments 魔术注释

webpack3 中提出了Magic Comment用于解决import()方法不支持为生成的chunk指定chunkName

用法也很简单:

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

对比require.ensure的使用方法:

const modules = r => require.ensure([], () => r(require('module')), 'my-chunk-name')

可能出现的问题

个人升级到webpack3的几个项目, 有 2 个项目打包后出现了 js 文件注入 html 文件后顺序出现错乱的问题, 几个项目的配置文件一样, 依赖也一样, 不知道为什么会出现这种情况, 如果出现了该问题, 可以用以下方法解决:

new HtmlWebpackPlugin({
    chunks: [
        'manifest', 'vendor', 'app'
    ],
    filename: 'index.html',
    template: 'src/template/index.html',
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode (chunk1, chunk2) {
        var orders = ['manifest', 'vendor', 'app'];
        var order1 = orders.indexOf(chunk1.names[0]);
        var order2 = orders.indexOf(chunk2.names[0]);
        return order1 - order2
    }
})

使用chunksSortMode方法手动给chunk排序