4-4 webpack-区分开发环境和生产环境

webpack-区分开发环境和生产环境

开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模块替换能力和localhost server（本地服务器）。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。

具体步骤

1.安装
打开终端，进入项目文件夹的路径，输入安装命令为：cnpm install --save-dev webpack-merge
2.配置
(1).拆分文件
在这里我们可以将webpack.config.js拆分为三个文件，分别是webpack.common.conf.js（公用的配置）、webpack.dev.conf.js（开发环境的配置）和webpack.prod.conf.js（生产环境的配置）。

webpack.common.conf.js是放一些我们公用的配置，比如入口entry、出口output、常用loader以及插件等。
webpack.dev.conf.js是在开发环境上的配置，比如devServer配置、模块热替换等方便开发的配置。
webpack.prod.conf.js是在生产环境上的配置，比如提取分离css、压缩css和js等。
新建一个config文件夹，里面新建三个文件：

• webpack.common.conf.js
• webpack.dev.conf.js
• webpack.prod.conf.js

webpack.common.conf.js里的内容为：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   
	entry:'./public/index.js',
	output:{
   
		path:path.resolve(__dirname,'build'),
		filename:"bundle[hash].js"
	},
	module:{
   
		rules:[
			{
   
				test:/\.css$/,
				use:['style-loader','css-loader']
			},
			{
   
				test:/\.less$/,
				use:['style-loader','css-loader','less-loader']
			},
			{
   
				test