當我們在開發一個項目的時候，我們一般用development這個環境進行項目的開發，在這個環境下，webpack使用dev-server，幫我們啟用一個服務器，然后這個服務器里面還集成了一些，比如hmr這樣的特性，只要我更改了代碼，他會幫我們重新打包，然后我們代碼的內容會實時的展示在對應的頁面上，所以開發環境上，development這樣的模式非常的方便，但是一旦我們的代碼開發完成了，我們需要把我們的代碼打包上線，這個時候主要用刀production模式，那么production模式和development模式差異主要在幾個方面。
首先在開發環境中，source-map他是非常全的，這樣的話可以幫助我們快遞定位問題，但是在production環境下，代碼已經要上線了，這個時候source-map並不那么重要了，這個時候的source-map會更佳簡潔一些
另外一點，在開發環境下，我們的代碼不壓縮，一旦代碼上線，我們希望我們的代碼被壓縮。
所以在開發環境下，我們webpack.config.js里面
mode: 'development', devtool: 'cheap-module-eval-source-map',
在上線環境下
mode: 'production', devtool: 'cheap-module-source-map',
每次開發上線，我們需要不斷的去更改webpack.config.js的內容，這樣就比較麻煩了，要像解決這個問題，我們這樣做，我們給他改一個名字。開發壞境下我們使用webpack.dev.js。線上環境用webpack.prod.js。
然后在package.json里面配置
"scripts": { "dev": "webpack-dev-server --config webpack.dev.js", "build": "webpack --config webpack.prod.js", },
然后開發環境運行npm run dev。打包運行 npm run build
我們發現dev和build存在很多相同的代碼。比如entry,modules,output。這樣就會出現大量重復代碼，為了解決這個問題，我們新建一個webpack.common.js。把公共的抽出來，抽出來之后，這個時候直接這樣肯定不行，npm run dev就只有webpack.dev.js這里面的文件。我們需要跟它們做一個合並。安裝
npm install webpack-merge -D
然后webpack.dev.js和webpack.prod.js引入merge模塊
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: /\.js$/,
// 如果你的這個js文件在node_modules里面，就不使用babel-loader了
exclude: /node_modules/,
loader: 'babel-loader' ,
},{
// 假設是以jpg結尾的，我需要一個load幫助我們去打包
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
// 原來是什么名字，打包好還是什么名字
name: '[name]_[hash].[ext]',
// 當我碰到jpg,png,gif的時候，打包到根目錄下到imgs文件夾里
outputPath: 'imgs/',
limit: 2048
}
}
},{
test: /\.eot|ttf|svg|woff$/,
use: {
loader: 'file-loader'
}
},{
// 假設是以css結尾的，我需要一個load幫助我們去打包
test: /\.scss$/,
// 需要兩個loader，所以不能是個對象，需要是個數組
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]},
// HtmlWebpackPlugin會在打包結束后，自動生成一個html文件，並把打包生成的js自動引入到這個html文件中
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
// 打包文件要放到哪里去，就配置在output這個對象里
output: {
// 打包好的文件名字
filename: '[name].js',
/**
* 打包出的文件要把他放到哪一個文件夾下，path后面要放一個絕對路徑
* __dirname指的是webpack.config.js所在的當前目錄的這個路徑
* 下面這個結合就是一個絕對路徑
*/
path: path.resolve(__dirname, 'dist')
}
}
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const devConfig = {
/**
* 打包模式，不配置會警告，但底層還是會去配置默認的，就是production
* production: 壓縮模式，被壓縮的代碼
* development: 開發模式，不壓縮的代碼
*
*/
mode: 'development',
/**
* cheap:在生成source-map的時候可以不帶列信息，只帶行信息就可以了
* 同時不要對我load代碼的source-map。只要對我的業務代碼進行source-map生成
* 這種方式提示的錯誤比較全，打包速度比較快，
*/
devtool: 'cheap-module-eval-source-map',
// 起個服務器
devServer: {
// 這個意思是服務器要生成在哪個文件夾下
contentBase:'./dist',
// 啟動的時候自動打開瀏覽器，然后自動訪問這個服務器地址
open:true,
// 開啟Hot Module Replacement
hot: true
},
// HtmlWebpackPlugin會在打包結束后，自動生成一個html文件，並把打包生成的js自動引入到這個html文件中
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
module.exports = merge(commonConfig, devConfig);
webpack.prod.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const prodConfig = {
/**
* 打包模式，不配置會警告，但底層還是會去配置默認的，就是production
* production: 壓縮模式，被壓縮的代碼
* development: 開發模式，不壓縮的代碼
*
*/
mode: 'production',
/**
* cheap:在生成source-map的時候可以不帶列信息，只帶行信息就可以了
* 同時不要對我load代碼的source-map。只要對我的業務代碼進行source-map生成
* 這種方式提示的錯誤比較全，打包速度比較快，
*/
devtool: 'cheap-module-source-map'
}
module.exports = merge(commonConfig, prodConfig);
這樣運行npm run dev, npm run build就沒有問題了。
有時候第三方模塊會給webpack進行一個整合，都放到build目錄里。這兩個時候package.json需要進行一個更改
"scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js", }