Webpack 4 配置最佳实践 _Webpack

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x 。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。
不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了 Webpack 4，并且总结成了博客。所以我也终于去了解了 Webpack 4 的具体情况。以下就是我对迁移到 Webpack 4 的一些经验。
本文的重点在：

Webpack 4 在配置上带来了哪些便利？要迁移需要修改配置文件的哪些内容？
之前的 Webpack 配置最佳实践在 Webpack 4 这个版本，还适用吗？

Webpack 4 之前的 Webpack 最佳实践这里以 Vue 官方的 Webpack 模板 vuejs-templates/webpack 为例，说说 Webpack 4 之前，社区里比较成熟的 Webpack 配置文件是怎样组织的。
区分开发和生产环境
大致的目录结构是这样的：
+ build+ config+ src在 build 目录下有四个 webpack 的配置。分别是：

webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js
webpack.test.conf.js

这分别对应开发、生产和测试环境的配置。其中 webpack.base.conf.js 是一些公共的配置项。我们使用 webpack-merge 把这些公共配置项和环境特定的配置项 merge 起来，成为一个完整的配置项。比如 webpack.dev.conf.js 中：
'use strict'const merge = require('webpack-merge')const baseWebpackConfig = require('./webpack.base.conf')const devWebpackConfig = merge(baseWebpackConfig, { ...})这三个环境不仅有一部分配置不同，更关键的是，每个配置中用 webpack.DefinePlugin 向代码注入了 NODE_ENV 这个环境变量。
这个变量在不同环境下有不同的值，比如 dev 环境下就是 development 。这些环境变量的值是在 config 文件夹下的配置文件中定义的。Webpack 首先从配置文件中读取这个值，然后注入。比如这样：
【Webpack 4 配置最佳实践】