webpack构建生产和开发环境分离（webpack模块化开发）

webpack开发环境和生产环境的构建目标差异很大。在开发环境中，需要具有强大的、具有实时加载或者热模块替换的source map和localhost server。而生产环境中，关注的是更小的bundle，更轻量的source map,以及更加优化的资源，已改善加载文件的时间。要遵循逻辑分离，我们通常建议为每个环境编写独立的webpack配置。

虽然，我们将生产环境和开发环境做了区分，但是还是要注意不要做重复的原则，保留通用配置。为了将这些配置合并在一起，需要使用webpack-merge插件，通过“通用”配置，我们不必在环境特定的配置中写重复代码。

在操作代码分离之前先安装webpack-merge插件,命令:npm install --save-dev webpack-merge

项目结构如下:

webpack.common.js属于公共模块：

webpack.dev.js开发环境

webpack.prod.js生产环境：

package.json添加生成生产环境资源命令和开发环境启动服务命令

"build": "webpack --config webpack.prod.js",

"start": "webpack-dev-server --open --config webpack.dev.js"

配置好之后，使用生成生产环境命令试试。命令:npm rum build

dist文件夹下生成了生产环境资源文件

使用开发环境命令：npm rum start

不在dist生成文件，直接在webpack 服务上启动运行。

还可以指定环境，许多library将通过与process.env.NODE_ENV环境变量关联，以决定library中引用哪些内容。例如，当不处于生产环境中时，某些library为了使用调试变的容易，可能会添加额外的日志记录和测试。其实，当使用

process.env.NODE_ENV==='production'时，一些library可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用webpack内置的DefinePlugin为所有的依赖定义这个变量：

然后在index.js使用判断检查环境变量

使用开发环境看看

浏览器控制台可以看到有打印的一串字符，说明配置的webpack.DefinePlugin是有效的，在生产环境是看不到打印的字符串的，开发环境是可以看到。

webpack构建环境还是挺不错的！