共计 4050 个字符，预计需要花费 11 分钟才能阅读完成。
在开发人员还在体会 webpack3.x 的余韵时，webpack4.x 已经悄然而来。
而对使用者来说，最期待的问题无外乎如下：
新版本与旧版本相比都有哪些改变？
webpack3.x 到 webapck4.x 的迁移？
使用 webpack4.x 我们应该注意什么？
webpack 的新特性
webpack 作为构建工具的强大之处在于：
可以在 webpack.config.js 中配置很多独特的功能；
它的配置灵活多变；
但正因为这样，这也是它的糟点。因为太随意，所以不好控制，造成了如下的问题：
学习、使用、研究 webpack 的成本过高（进阶曲线太陡）；
构建一个小应用也需要像构建大应用那样配置 webpack.config.js（麻雀虽小五脏俱全）；
而 webpack4.x 作为新一代版本 webpack，它的出现极大的解决了现有的问题。
webpackk4.x 可以不使用 webpack.config.js 配置文件
可以使用下面 6 小步完成项目的构建：
创建一个项目目录（webpack-demo），然后进入改目录 mkdir webpack-demo && cd webpack-demo
初始化 package.json 文件 npm init -y
加载 webpack 和 webpack-cli 依赖 npm install webpack webpack-cli –save-dev
在项目中添加 ~/src/index.js 文件（index.js 是默认的入口文件，默认入口目录为~/src，当然你也可以自定义入口文件，需要修改 package.json 中的 main 配置项为指定的文件）
index.js 文件代码如下：
console.log(‘hello webpack.’)
打开 package.json 在 scripts 配置项中添加如下代码：
“scripts”: {
“build”: “webpack”
}
注：这就是 NPM 的 scripts 命令
运行 npm run build 命令，之后在项目中你将看到一个 ~/dist/main.js 的文件。在命令窗口你因该注意到如下的警告提示：
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
忽略这条提示信息，我们发现 webpack4.x 的项目初始化配置和 webpack3.x 没什么大的区别，但是 webpack4.x 少了必须要的 webpack.config.js 配置文件。
打包模式的改变
我们再回头查看上面这个提示信息，它的意思就是说：‘如果没有设置打包模式这个配置项，那么默认的打包模式为生产模式（production），而对于开发模式（development），需要配置 mode 配置项’，说到这里，我想各位看官应该明白了 webpack4.x 增加了很多默认配置项，针对不了解 webpack 的人员或小应用开发的场景，这样做无异省时省力。
但实际应用中，我们往往还是区分开发模式和生产模式，但这在 webpack4.x 中也不是什么难事儿，只要修改 package.json 中的 scripts 如下：
“scripts”: {
“dev”: “webpack –mode development”, // 用于开发模式
“build”: “webpack –mode production” // 用于生产模式
}
‘对！webpack4.x 就是这么简单’。我们不需要像 webpack3.x 那样分别定义开发模式和生产模式这样两份配置文件。
重载默认的配置项入口 / 出口
没有了配置文件 webpack.config.js，在减少了我们的配置工作量同时，也给初窥门径的我们带来了一些疑问。例如：如何自定义入口 / 出口？
在没有 webpack.config.js 的情况下，我们可以在命令行中添加入口 / 出口配置项，代码如下：
“scripts”: {
“dev”: “webpack –mode development ./src/entry.js –output ./dist/bundle.js”, // 用于开发模式
“build”: “webpack –mode production ./src/entry.js –output ./dist/bundle.min.js” // 用于生产模式
}
这只是不使用 webpack.config.js 的一种方案。
以上就是 webpack4.x 给我们带来的整体变化。
但是原来 webpack.config.js 配置文件中的 module 和 plugins 配置项中的功能实现还是需要使用 webpack.config.js。虽然 webpack 团队的计划是 0 配置一些常用的 loader，plugin，但实现的仅有 UglifyJSPlugin 内置插件，在生产模式无需引入它就可以实现 *.js 代码的压缩。其它的 loader 和 plugin 则只能通过 webpack.config.js 来引入。
webpack 的迁移和注意事项
看到 webpack4.x 的这些变化，很多人不仅会问 webpack3.x 到 webpack4.x 的迁移是不是很麻烦，其实并不麻烦，webpack4.x 向后兼容 webpack.3x。
前面为了不引入 webpack.config.js，我们使用了 npm 的 scripts，其时像入口 / 出口的重载，我们也可以在 webpack.config.js 配置文件中完成，配置跟原来的相似，但是 webpack4.x 有如下问题需要注意：
升级到 webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是 webapck 须是 4.2.0 版本以上（较低的版本不支持）。
使用 使用 babel-loader 转化 ES6->ES5 时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 –module-bind js=babel-loader 即可完成对 babel-loader 的配置。
其他的 loader 和 plugin 没有什么大的变化。其实讲到这里基本完了，下面是用 webpack4.x 构建的一个 demo。
webpack4.x 的 demo
紧接上面的配置：
首先，添加 html-wepback-plugin 和 html-loader 依赖：
npm install html-webpack-plugin html-loader –save-dev
html-webpack-plugin 生成 html 文件（html 文件用来加载打包生成 bundle.js 文件），当然你也可以使用 webpack 支持的各种模板 loader，这里使用 html-loader 支持的 *.html 类型模板来生成。
其次，添加 mini-css-extract-plugin 和 css-loader 依赖：
npm install mini-css-extract-plugin css-loader –save-dev
loader 和 plugin 配置与 webpack3.x 类同，也可参考下面提供代码中的 webpack.config.js 文件。
然后，添加 babel-loader、@babel/babel-core 和 @babel/babel-preset 依赖：
npm install @babel/core babel-loader @babel/preset-env –save-dev
loader 和 plugin 配置与 webpack3.x 类同，也可参考下面提供源码中的 webpack.config.js 文件。
修改 package.json 中 scripts 如下：
“scripts”: {
“dev”: “webpack –mode development –module-bind js=babel-loader ./src/entry.js –output ./dist/bundle.js”,
“build”: “webpack –mode production ./src/entry.js –module-bind js=babel-loader –output ./dist/bundle.min.js”
},
最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新
npm install webpack-dev-server
在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：
“scripts”: {
“dev”: “webpack-dev-server –mode development –module-bind js=babel-loader ./src/entry.js –output ./dist/bundle.js”,
“build”: “webpack –mode production ./src/entry.js –module-bind js=babel-loader –output ./dist/bundle.min.js”
},
这样一个简单的 demo 就完成了。
其他的 loader 和 plugin 配置和 webpack3.x 类同。
wepback4-demo 源代码
参考资料
webpack-tutorial
webpack 官方指南
我的 webpack 系列文章
