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:/\.scss$/,
				use:['style-loader','css-loader','sass-loader']
			},
			{
				test:/\.(png|jpg|gif|jpeg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'[hash]Show.jpg',
						outputPath:'./img'
					}
				}]
			},
			{
				test:/\.(ttf|woff|woff2|eot|svg)$/,
				use:[{
					loader:'file-loader',
					options:{
						outputPath:'font/'
					}
				}]
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				use:'babel-loader'
			},
			{
			    test: /\.html$/,
			    use: [{
			      loader: 'html-loader',
			      options: {
			        minimize: true
      			  }
    			}]
			},
		]
	},
	plugins:[
		new webpack.ProvidePlugin({
			jQuery:"jQuery"
		}),
		new HtmlWebpackPlugin({
			template:"./public/index.html",
			filename:"webpack.html",
			minify:{
				minimize:true,
				removeComments:true,
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				minifyCSS:true,
				minifyJS:true,
				removeEmptyElements:true
			},
			hash:true
		}),
	]
}

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

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
// 需要引入webpack.commom.conf.js文件
const common = require('./webpack.common.conf.js');

module.exports = merge(common,{
	devtool:"cheap-module-eval-source-map",
	devServer:{
		contentBase:'./build',  //设置服务器访问的基本目录
		host:'localhost', //服务器的ip地址
		port:8080,  //端口
		open:true,  //自动打开页面
		hot:true,
		hotOnly:true
	},
	plugins:[
		new webpack.NamedModulesPlugin(),
    	new webpack.HotModuleReplacementPlugin(),
	]
})

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

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const merge = require('webpack-merge');
// 需要引入webpack.commom.conf.js文件
const common = require('./webpack.common.conf.js');


module.exports = merge(common,{
	devtool:"source-map",
	plugins:[
		new CleanWebpackPlugin(),
		new CopyWebpackPlugin({
      		patterns: [
        		{ from: __dirname+'/public/assets', to: __dirname+'/build/assets' },
     		 ],
    		}),
		new ExtractTextPlugin({
  			filename: 'style.css',
  			disable: true
		}),
		new MiniCssExtractPlugin({
			filename:"./css/index.css"
		}),
		
		new OptimizeCSSAssetsPlugin({
			assetNameRegExp:/\.css$/g,
			cssProcessor:require('cssnano'),
			cssProcessorPluginOptions:{
				preset:['default',{discardComments:{removeAll:true}}]
			},
			canPrint:true
		})
	]
})

（2）修改package.json文件中的script

"scripts": {
    "dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
    "build": "webpack --mode production --config ./config/webpack.prod.conf.js",
    "start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
  },

注：–config可以指定使用的配置文件