npm install webpack
目前安装默认会使用 2.2+
版本了。
配置
这边仅列举项目中常见配置的一些变更,更具体的信息请翻阅官方文档。
1、 resolve.root
, resolve.fallback
, resolve.modulesDirectories
配置项被 resolve.modules
所替代。
resolve: {
- root: path.join(__dirname, "src")
+ modules: [
+ path.join(__dirname, "src"),
+ "node_modules"
+ ]
}
2、 resolve.extensions
配置项不再需要传一个空字符串了。
3、 module.loaders
改成了 module.rules
,虽然 module.loaders
语法依旧保留,但是不建议使用。
module: {
- loaders: [
+ rules: [
{
test: /.css$/,
- loaders: [
+ use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
- query: {
+ options: {
modules: true
}
}
]
},
{
test: /.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
}
]
}
4、 loaders
中由原先!
拼接字符串的写法改为 loader.use
数组。
5、 所有 loader
模块必须带上 -loader
后缀,不能省略。
6、 loader
的参数配置只能写在 rule.options
内部不能写在外面。
7、 ExtractTextWebpackPlugin
改变
ExtractTextPlugin 1.0.0
不能在 webpack v2
下工作。 你需要明确地安装 ExtractTextPlugin v2
。
npm install
这一插件的配置变化主要体现在语法上。
ExtractTextPlugin.extract
module: {
rules: [
test: /.css$/,
- loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+ loader: ExtractTextPlugin.extract({
+ fallbackLoader: "style-loader",
+ loader: "css-loader",
+ publicPath: "/dist"
+ })
]
}
new ExtractTextPlugin({options})
plugins: [
- new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+ new ExtractTextPlugin({
+ filename: "bundle.css",
+ disable: false,
+ allChunks: true
+ })
]
其它检查项
loader
默认的 resolve
配置是相对于 context
的,可以不用再使用类似 path.resolve()
的方法来指定目录了
取消了 module.PReLoaders
以及 module.postLoaders
更改 UglifyJsPlugin
的 sourceMap
的默认配置为 false
更改 UglifyJsPlugin
的 comPress.warnings
的默认配置为 false
UglifyJsPlugin
不再压缩 loaders
,需要通过设置 minimize:true
。后续版本会逐渐移除
plugins: [
+ new webpack.LoaderOptionsPlugin({
+ minimize: true
+ })
]
代码中变更
目前由于这个建议还在 Stage 3,如果你想要同时使用 import
和 Babel
,你需要安装/添加 dynamic-import
语法插件来绕过解析错误。
结尾
体验下来,版本升级,整体配置文件的改动成本还算小的。如果碰到第三方 loader
对 V2 版本支持不友好的话就要费点脑筋了。可能由于我试验项目中文件内容不多,对于编译速度和打包后的文件大小差别不太明显。
UPDATE
Webpack3 基本上也可以无痛升级,比较大的改动点如下:
参考文章: https://medium.com/webpack/we...
脚本宝典总结
以上是脚本宝典为你收集整理的Webpack V2 升级初体验全部内容,希望文章能够帮你解决Webpack V2 升级初体验所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。