Webpack 1 / 2的区别
1. 增加对 ES6 模块的原生支持
// before
"presets": ["es2015"]
// after
"presets": [
["es2015", { "modules": false }]
]
2. 可以混用 ES2015 和 AMD 和 CommonJS
3. 支持 tree-shaking（减少打包后的体积）
4. 新增更多的 CLI 参数项
-p 指定当前的编译环境为生产环境，即设置 process.env.NODE_ENV 为 production
5. 配置选项语法有较大改动，且不向下兼容
**resolve**（解析）
取消了 extensions 空字符串（表示导入文件无后缀名）
**resolve.modulesDirectories => resolve.modules**
**Webpack1**
resolve: {
extensions: ['', '.js', '.css'],
modulesDirectories: ['node_modules', 'src']
}
**Webpack2**
resolve: {
extensions: ['.js', '.css'],
modules: [
path.resolve(__dirname, 'node_modules'),
path.join(__dirname, './src')
]
}
配置项 **- module**（模块）
1. 外层 loaders 改为 rules
2. 内层 loader 改为 use
3. 所有插件必须加上 -loader，不再允许缩写
4. 不再支持使用!连接插件，改为数组形式
5. json-loader 模块移除，不再需要手动添加，webpack2 会自动处理
6. // 引用次数优化默认启用不需要再new webpack.optimize.OccurenceOrderPlugin(),
**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"
]
}]
};
配置项 **- plugins**（插件）
移除了 OccurenceOrderPlugin 模块（已内置）、NoErrorsPlugin 模块（已内置）
**postcss**和**postcss-loader**来加载和处理我们的CSS。在1.0里，需要在webpack配置的最外层对其进行单独配置，那么在2.0里是不再允许。作为替代，在2.0里允许对每个loader进行单独的配置，但是需要在对应的rule.use里。也就是说，在1.0里需要在最外层进行配置的插件，在2.0里就必须修改成在rule里单独配置
// before, in Webpack top level
postcss: {
plugins: ...
}
// after
**module**: {
rules: [{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
plugins: ...
}
},
'sass-loader'
]
}]
}
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');
升级你的webpack
需要做的改动如下：
-
module.loaders 改名为 module.rules，loaders 参数变成了 use，query 参数变成了 options
-
loader 名称中的 -loader 需要手动添加
-
不再需要 json-loader
-
webpack.optimize.UglifyJsPlugin 默认不生成 sourcemap，需要手动开启
-
不再需要 webpack.optimize.DedupePlugin
-
webpack.optimize.OccurrenceOrderPlugin 默认开启，所以不再需要
-
ExtractTextWebpackPlugin 需要使用 2.x 版本，并且修改了 api
-
支持动态 import 了，可以写 import(./routes/${path}/route
) -
支持解析 import 和 exports 关键字了，不再需要 babel 对上面两个关键字进行编译。在 .babelrc 中关闭
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
]
}
- webpack-dev-server 不再接受 contentBase 参数，换成了 proxy
- postcss-loader 的参数需要写到 loader 的 options 中
- webpack.NoErrorsPlugin 被替换成了 webpack.NoEmitOnErrorsPlugin
- 升级 html-webpack-plugin 到最新版，v2.27.0 修复了 wepback@2.x 中 chunksorter 的问题
其他兼容的变更，不需要改动：
- require 中支持 es6 template string
- webpack.config.js 支持异步配置
- webpack.config.js 不再接受不能识别的配置参数
- webpack-dev-server 的控制台输出更少信息
参考资料
Webpack 3，从入门到放弃
https://yangkean.com/blog/2017/8/webpack.html
入门Webpack，看这篇就够了
https://www.jianshu.com/p/42e11515c10f
从 webpack v1 迁移到 webpack v2
http://www.zcfy.cc/article/migrating-from-v1-to-v2-2378.html
网友评论