wbpack配置 生产-开发 环境

在配置开发环境 和 生产环境的时候先了解一下他们的区别：

开发环境： 要具有强大的、具有实时重新加载(live reloading)或热模块替换(HMR)能力的 source map 和 devserver proxy。

生产环境： 需要做更轻量化的操作，css压缩，打包处理以及更优化的资源，以改善加载时间。

如此，我们把公共的配置，放到webpack.base.config.js中，生产环境配置放到webpack.prod.config.js中，开发环境配置放到webpack.dev.config.js中。

了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具来进行环境的合并。

1，使用了webpack.DefinePlugin()插件，来指定环境

在开发环境 webapck.dev.config.js：

plugins: [
	new webpack.DefinePlugin({
		'process.env': require('../config/dev.env')
	}),
]

在生产环境webpack.prod.config.js：

plugins: [
	new webpack.DefinePlugin({
		'process.env': require('../config/prod.env')
	}),
]

2，环境配置

prod.env.js

'use strict'
module.exports = {
	NODE_ENV: '"production"'
}

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

之后可以在page.json中设置：

"scripts":{
	// 开发环境
	"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	// 生产环境
	 "build": "webpack --config build/webpack.prod.conf.js"
}

如果使用vue脚手架，不用webpack 可以使用这样的方式：
vue脚手架开发，生产，测试环境配置