Webpack 1 / 2 / 3 的 区别

Webpack 1 / 2 / 3 的 区别

一、 Webpack2 VS Webpack1

新增了许多新特性，需要处理配置语法兼容

1. 增加对 ES6 模块的原生支持

2. 可以混用 ES2015 和 AMD 和 CommonJS

3. 支持 tree-shaking（减少打包后的体积）

4. 新增更多的 CLI 参数项

-p 指定当前的编译环境为生产环境，即设置 process.env.NODE_ENV 为 production

5. 配置选项语法有较大改动，且不向下兼容

5.1 配置项 - resolve（解析）

• 取消了 extensions 空字符串（表示导入文件无后缀名）

• Webpack1

resolve: {
    extensions: ['', '.js', '.css'],
    modulesDirectories: ['node_modules', 'src']
}

• Webpack2

resolve: {
    extensions: ['.js', '.css'],
    modules: [
        path.resolve(__dirname, 'node_modules'),
        path.join(__dirname, './src')
    ]
}

5.2 配置项 - module（模块）

• 外层 loaders 改为 rules
• 内层 loader 改为 use
• 所有插件必须加上 -loader，不再允许缩写
• 不再支持使用!连接插件，改为数组形式

• json-loader 模块移除，不再需要手动添加，webpack2 会自动处理

• Webpack1

module: {
    loaders: [{
        test: /\.(less|css)$/,
        loader: "style!css!less!postcss"
    }, {
        test: /\.json$/,
        loader: 'json'
    }]
}

• Webpack2

module: {
    rules: [{
        test: /\.(less|css)$/,
        use: [
            "style-loader", 
            "css-loader", 
            "less-loader", 
            "postcss-loader"
        ]
    }]
};

5.3 配置项 - plugins（插件）

• 移除了 OccurenceOrderPlugin 模块（已内置）、NoErrorsPlugin 模块（已内置）

二、 Webpack3 VS Webpack2

两个版本几乎完全兼容，新增部分新特性

1. 加入 Scope Hoisting（作用域提升）

• 之前版本将每个依赖都分别封装在一个闭包函数中来独立作用域。这些包装函数闭包函数降低了浏览器 JS 引擎解析速度
• Webpack 团队参考 Closure Compiler 和 Rollup JS，将有联系的模块放到同一闭包函数中，从而减少闭包函数数量，使文件大小的少量精简，提高 JS 执行效率
• 在 Webpack3 配置中加入 ModuleConcatenationPlugin 插件来启用作用域提升

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

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');