一、分离生产模式和开发模式配置文件的原因 ：
首先，到目前为止，webpack的配置文件webpack.config.js已经有一定的体积了；当我们开发到这个时候，现在需要发到线上，我们要在配置文件中怎么做：
1、将开发模式 mode 改成 production；
2、sourceMap的配置改成：devtool:'cheap-module-source-map',等等，
那么问题来了，我们肯定会做开发模式和生产模式的切换，我们不可能每次都去修改配置文件吧？这很不现实啊，为了解决这个问题，我们就需要将开发模式的配置文件和生产模式的配置文件区分开；
没有分离的配置文件：
let path = require('path');
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean-webpack-plugin插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: "development",
// entry: './src/index.js', //entry节点配置的是项目打包的入口文件
entry: {
main: './src/index.js', // 在配置entry节点时，一般是不需要写main的,webpack会默认设置为main
// sub: './src/index.js'
},
devServer: {
contentBase: './bundle',
open: true,
port: 8081,
hot: true,
hotOnly: true
},
// 'development'模式
devtool: 'cheap-module-eval-source-map',
// 'production' 模式
// devtool:'cheap-module-source-map',
module: {
rules: [
// file-loader的配置规则
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
}
},
// url-loader的配置规则
{
test: /\.jpg|png|jepg|gif$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},
// postcss-loader的配置
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
],
},
// babel-loader的配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}
]
},
output: {
/**
* output节点配置的是项目打包的出口文件;
* 将文件打包后放在哪个文件中以及放在哪个文件夹中;
*/
// publicPath:'http://cdn.com',
filename: '[name].js', //filename节点，指定出口文件，webpack默认出口文件是main.js
path: path.resolve(__dirname, 'bundle')
/**
* path节点，指定的是出口文件存放的文件夹;
* webpack默认出口文件夹是项目根目录下的dist目录;
*/
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
}), new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
usedExports: true
}
//production 模式打包出来的代码是压缩的,development模式打包出来的代码是未压缩的
}
二、区分development模式和production模式配置文件：
1、思路：写两个配置文件 ，
一个webpack.dev.js，是development模式的配置文件；
一个webpack.prod.js，是production模式的配置文件，
然后将webpack.config.js文件中的内容分别复制一份，将webpack.prod.js中的配置项做些许更改：
（1）将开发模式 mode 改成 production；
（2）sourceMap的配置改成：devtool:'cheap-module-source-map'；
这一步只是过渡，代码就不贴了，配置文件的名字可以自己定义，项目中一般命名配置文件名称就那么几个，自己能区分就行；
2、在package.json文件中：
"scripts": {
"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两个配置文件中存在大量重复的配置项，我们需要做一下合并：
1、合并配置文件的思路：将两个文件中的公共部分，抽离到一个公共文件中去；我们命名为webpack.common.js;
2、开发和生产配置文件的公共配置项（相对于目前的配置文件）：
（1）entry节点和output节点；
（2）module节点；
（3）部分plugins节点；
3、抽离之后的webpack.common.js文件：
let path = require('path');
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean-webpack-plugin插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js', // 在配置entry节点时，main键可以不写,webpack会默认设置为main
},
module: {
rules: [
// file-loader的配置规则
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
}
},
// url-loader的配置规则
{
test: /\.jpg|png|jepg|gif$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},
// postcss-loader的配置
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
],
},
// babel-loader的配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}
]
},
output: {
filename: '[name].js', //filename节点，指定出口文件，webpack默认出口文件是main.js
path: path.resolve(__dirname, 'bundle')
/* path节点，指定的是出口文件存放的文件夹; webpack默认出口文件夹是项目根目录下的dist目录;
*/
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
}), new CleanWebpackPlugin(), ],
}
4、安装webpack-merge插件，使用merge()函数合并webpack.dev.js和webpack.common.js中的配置项；
5、合并后的webpack.dev.js配置文件：
const webpack = require('webpack');
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const devConfig = {
mode: "development",
devServer: {
contentBase: './bundle',
open: true,
port: 8081,
hot: true,
// hotOnly: true
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin()
],
optimization: {
usedExports: true
}
}
// 使用webpack-merge整合webpack.dev.js和webpack.common.js中的配置项；
module.exports = merge(commonConfig, devConfig)
6、合并后的webpack.prod.js配置文件
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const prodConfig = {
mode: "production",
devtool: 'cheap-module-source-map',
}
// 使用webpack-merge整合webpack.dev.js和webpack.common.js中的配置项；
module.exports = merge(commonConfig, prodConfig)
四、将配置文件移动到单独的文件夹中（我们使用build文件夹）：
1、在项目根目录下创建一个build目录；
2、将webpack.dev.js、webpack.prod.js、webpack.common.js放到build目录中；
3、修改package.json文件中的script标签，将config后的路径做修改：
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
五、修改webpack.common.js中的output节点：
1、此时我们运行 npm run build 命令，会发现webpack会将出口文件输出到build目录下，这是因为配置文件中的path是：
path: path.resolve(__dirname, 'bundle')，
这个节点的意思是，当前目录下的bundle，所以，webpack会将bundle目录输出到build目录下；
此时，我们需要将webpack.common.js中的path节点配置成：
path: path.resolve(__dirname, '../bundle')，
这时，webpack就会将出口文件打包到项目根目录下的bundle目录中 ；
2、关于clean-webpack-plugin版本的问题：
（1） 对于 clean-webpack-plugin插件2.0.0以下的版本，我们打包的时候会发现无法清除bundle目录下的文件，这是因为clean-webpack-plugin插件认为配置文件所在的build目录才是根目录，而clean-webpack-plugin插件无法清除根目录以外的文件，此时，我们在clean-webpack-plugin插件添加一个配置项：
new CleanWebpackPlugin(['../bundle'],{
root:path.resolve(__dirname,'../bundle')})
此时 ， clean-webpack-plugin插件认为根目录就是项目根目录了；
（2）对于clean-webpack-plugin插件2.0.0以上的版本，不存在这个问题，会正常的分辨项目根目录；