Wbpack configuring production development environment

Configuring the development environment and First understand the differences between them when it comes to the production environment ：

development environment ： Have a strong 、 With real-time reload (live reloading) Or thermal module replacement (HMR) The ability of source map and devserver proxy.

Production environment ： Need to do a lighter operation ,css Compress , Packaging processing and more optimized resources , To improve loading time .

such , We put the public configuration , Put it in webpack.base.config.js in , Production environment configuration webpack.prod.config.js in , Development environment configuration webpack.dev.config.js in .

To combine these configurations , We will use a name called webpack-merge Tools to merge environments .

1, Used webpack.DefinePlugin() plug-in unit , To specify the environment

In the development environment webapck.dev.config.js：

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

In production environment webpack.prod.config.js：

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

2, Environment configuration

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"'
})

After that, you can go to page.json Set in ：

"scripts":{
    
	//  development environment 
	"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	//  Production environment 
	 "build": "webpack --config build/webpack.prod.conf.js"
}