WebPack 迁移到新版本

发布时间：2023-05-08 12:29:26 所属栏目：教程来源：

导读：以下各节描述从 webpack 1 到 webpack 2 的重大变化。

webpack 从 1 到 2 的变化，比从 2 到 3 要少很多，所以版本迁移起来难度应该不大。

随着 webpack 2 版本已经发布一段时间，此章节的内容可能会在不久的将

以下各节描述从 webpack 1 到 webpack 2 的重大变化。

webpack 从 1 到 2 的变化，比从 2 到 3 要少很多，所以版本迁移起来难度应该不大。

随着 webpack 2 版本已经发布一段时间，此章节的内容可能会在不久的将来被转移到博客文章中。最重要的是，webpack 3 版本最近发布，webpack 4 版本即将发布。如上所述，大家最好是参考更新日志去进行相应的版本迁移。

resolve.root, resolve.fallback, resolve.modulesDirectories
这些选项被一个单独的选项 resolve.modules 取代。更多用法请查看解析。

resolve: {
- root: path.join(__dirname, "src")
+ modules: [
+ path.join(__dirname, "src"),
+ "node_modules"
+ ]
}
resolve.extensions
此选项不再需要传一个空字符串。此行为被迁移到 resolve.enforceExtension。更多用法请查看解析。

resolve.*
这里更改了几个 API。由于不常用，不在这里详细列出。更多用法请查看解析。

module.loaders 改为 module.rules
旧的 loader 配置被更强大的 rules 系统取代，后者允许配置 loader 以及其他更多选项。为了兼容旧版，module.loaders 语法仍然有效，旧的属性名依然可以被解析。新的命名约定更易于理解，并且是升级配置使用 module.rules 的好理由。

module: {
- loaders: [
+ rules: [
{
test: /\.css$/,
- loaders: [
- "style-loader",
- "css-loader?modules=true"
+ use: [
+ {
+ loader: "style-loader"
+ },
+ {
+ loader: "css-loader",
+ options: {
+ modules: true
+ }
+ }
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // 这里不再使用 "use"
options: {
// ...
}
}
]
}
链式 loader
就像在 webpack 1 中，loader 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。使用 rule.use 配置选项，use 可以设置为一个 loader 数组。在 webpack 1 中，loader 通常被用 ! 连写。这一写法在 webpack 2 中只在使用旧的选项 module.loaders 时才有效。

module: {
- loaders: [{
+ rules: [{
test: /\.less$/,
- loader: "style-loader!css-loader!less-loader"
+ use: [
+ "style-loader",
+ "css-loader",
+ "less-loader"
+ ]
}]
}
取消「在模块名中自动添加 -loader 后缀」
在引用 loader 时，不能再省略 -loader 后缀了:

module: {
rules: [
{
use: [
- "style",
+ "style-loader",
- "css",
+ "css-loader",
- "less",
+ "less-loader",
]
}
]
}
你仍然可以通过配置 resolveLoader.moduleExtensions 配置选项，启用这一旧有行为，但是我们不推荐这么做。

+ resolveLoader: {
+ moduleExtensions: ["-loader"]
+ }
了解这一改变背后的原因，请查看 #2986。

json-loader 不再需要手动添加
如果没有为 JSON 文件配置 loader，webpack 将自动尝试通过 json-loader 加载 JSON 文件。

module: {
rules: [
- {
- test: /\.json/,
- loader: "json-loader"
- }
]
}
我们决定这么做是为了消除 webpack、 node.js 和 browserify 之间的环境差异。

配置中的 loader 默认相对于 context 进行解析
在 webpack 1 中，默认配置下 loader 解析相对于被匹配的文件。然而，在 webpack 2 中，默认配置下 loader 解析相对于 context 选项。

这解决了「在使用 npm link 或引用 context 上下文目录之外的模块时，loader 所导致的模块重复载入」的问题。

你可以移除掉那些为解决此问题的 hack 方案了：

module: {
rules: [
{
// ...
- loader: require.resolve("my-loader")
+ loader: "my-loader"
}
]
},
resolveLoader: {
- root: path.resolve(__dirname, "node_modules")
}
移除 module.preLoaders 和 module.postLoaders
module: {
- preLoaders: [
+ rules: [
{
test: /\.js$/,
+ enforce: "pre",
loader: "eslint-loader"
}
]
}
UglifyJsPlugin sourceMap
UglifyJsPlugin 的 sourceMap 选项现在默认为 false 而不是 true。这意味着如果你在压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，你需要将 UglifyJsPlugin 的 sourceMap 设为 true。

devtool: "source-map",
plugins: [
new UglifyJsPlugin({
+ sourceMap: true
})
]

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!