为了账号安全,请及时绑定邮箱和手机立即绑定

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_ENVproduction

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');
点击查看更多内容
9人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消