Development 和 Prodection 模式打包的区别

webpack 打包，我们是可以配置模式的。如下是webpack.config.js 中的一部分代码。

module.exports = {
	mode: "development"
}

我们一般用development 的模式进行开发，在这个环境下，我们使用了webpack 中的 devServer，它可以帮我们起一个服务器，还可以配置热更新等内容。十分方便。

但是，当我们开发完成，需要打包上线。这种情况就需要用production 的模式。

production 与 development 模式下环境的区别：

- 在开发环境中，SourceMap 是非常全的，可以快速定位代码的问题；在线上环境中，SourceMap 会更加简介一些（一般.map文件）

- 在开发环境中，代码一般不需要压缩；线上环境，代码会被压缩

在前面我们配置了开发环境，将mode 设为development , devtool 设为了 ...-eval-...-source-map，设置了optimization。如果我们要切换到开发环境就要将mode 设为 production, "eval" 去掉，optimization配置项删掉。很麻烦。

那我们可以这样做：

将之前的webpack.config.js 改名为 webpack.dev.js

然后在项目根目录下，创建文件 webpack.prod.js

我们先列一下webpack.dev.js 代码如下。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	mode: "development",
	devtool: "cheap-eval-module-source-map",
	devServer: {
		contentBase: './dist',
		open: true,
		hot: true,
		hotOnly: true
	},
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		},{
			test: /\.css$/,
			use: ['style-loader',
				'css-loader',
				'postcss-loader']
		},{ 
			test: /\.js$/,
			exclude: /node_modules/,
			loader: "babel-loader",
			options: {
				presets: [["@babel/preset-env",{
					useBuiltIns: 'usage'
				}]]
			}
		}
		]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		// publicPath: "/",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(),
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		usedExports: true
	}
}

然后再列一下 webpack.prod.js代码如下。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	mode: "production",
	devtool: "cheap-module-source-map",
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		},{
			test: /\.css$/,
			use: ['style-loader',
				'css-loader',
				'postcss-loader']
		},{ 
			test: /\.js$/,
			exclude: /node_modules/,
			loader: "babel-loader",
			options: {
				presets: [["@babel/preset-env",{
					useBuiltIns: 'usage'
				}]]
			}
		}
		]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		// publicPath: "/",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin()
	]
}

好的。然后再去改一下package.json 文件，如下。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack --config webpack.dev.js",
    "watch": "webpack --watch",
    "middleware": "node server.js",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },

好啦，然后可以使用 npm run dev / npm run build 即可打包。

这个时候，我们会发现 webpack.dev.js 中与 webpack.prod.js 中存在大量的重复代码。

这个时候我们写一个模块存放公共的配置项，再把它并入dev.js prod.js 中。

我们再项目根目录下，创建一个文件 webpack.common.js

下面是webpack.common.js 内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		},{
			test: /\.css$/,
			use: ['style-loader',
				'css-loader',
				'postcss-loader']
		},{ 
			test: /\.js$/,
			exclude: /node_modules/,
			loader: "babel-loader",
			options: {
				presets: [["@babel/preset-env",{
					useBuiltIns: 'usage'
				}]]
			}
		}
		]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		// publicPath: "/",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin()
	]
}

下面是webpack.dev.js 内容

const webpack = require('webpack');

module.exports = {
	mode: "development",
	devtool: "cheap-eval-module-source-map",
	devServer: {
		contentBase: './dist',
		open: true,
		hot: true,
		hotOnly: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		usedExports: true
	}
}

下面是webpack.prod.js 内容

module.exports = {
	mode: "production",
	devtool: "cheap-module-source-map"
}

我们还需要在 prod.js 与 dev.js 中能合并common.js 中的代码。合并的功能，我们需要借助一个第三方模块 webpack-merge.

我们先来安装webpack-merge 使用命令 npm install webpack-merge --save-dev

安装好了后，我们先到webpack.dev.js 中引入 webpack-merge,并使用它合并配置。如下。

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
	mode: "development",
	devtool: "cheap-eval-module-source-map",
	devServer: {
		contentBase: './dist',
		open: true,
		hot: true,
		hotOnly: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		usedExports: true
	}
}

module.exports = merge(commonConfig, devConfig);

同理去，webpack.prod.js 中去合并，如下。

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig = {
	mode: "production",
	devtool: "cheap-module-source-map"
}

module.exports = merge(prodConfig, commonConfig);

好啦，可以使用npm run dev / npm run build 打包了。