Webpack配置區分開發環境和生產環境
在專案開發的時候，我們通常會將程式分為開發環境和生產環境（或者叫線上環境），開發環境通常指的是我們正在開發的這個階段所需要的一些環境配置，也就是方便我們開發人員除錯開發的一種環境；生產環境通常指的是我們將程式開發完成經過測試之後無明顯異常準備釋出上線的環境，也可以理解為使用者可以正常使用的就是生產環境；
當然開發環境和生產環境在配置方面的需求是不一樣的，但是有共同點：
開發環境的需求：
模組熱更新 （本地開啟服務，實時更新）
sourceMap (方便打包除錯)
介面代理 (配置proxyTable解決開發環境中的跨域問題)
程式碼規範檢查 (程式碼規範檢查工具)
生產環境的需求：
提取公共程式碼
壓縮混淆(壓縮混淆程式碼，清除程式碼空格，註釋等資訊使其變得難以閱讀)
檔案壓縮/base64編碼(壓縮程式碼，減少線上環境檔案包的大小)
去除無用的程式碼
開發環境和生產環境的共同需求：
同樣的入口
同樣的程式碼處理(loader處理)
同樣的解析配置
在我們搭建好Vue-cli腳手架之後，我們的build資料夾會分別自動的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三個webpack配置檔案；
webpack.base.conf.js：webpack的開發環境和生產環境的共有配置(開發環境和生產環境都是需要執行的配置)
webpack.dev.conf.js：webpack的開發環境的特有配置(只在開發環境中執行，生產環境中不執行)
webpack.prod.conf.js：webpack的生產環境的特有配置(只在生產環境中執行，開發環境中不執行)
我們為什麼要區分開發環境和生產環境呢？
因為一個專案的開發過程中肯定不會是一個版本開發完之後就立馬上線，開發是必需，上線是目的；在開發的過程中會有各種各樣的問題，比如開發環境中跨域、開發環境和生產環境因環境不同而產生的未知奇葩錯誤等等都是會時常發生的，我們區分環境的目的就是為了讓開發人員在開發的過程中可以方便除錯，保持高效的開發；讓程式在生產環境中正常有效的執行；
webpack.base.conf.js配置
const path = require('path');
//清除build/dist資料夾檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');
//生成建立Html入口檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
//將css提取到單獨的檔案中
const MiniCssExtract = require('mini-css-extract-plugin');
//css壓縮
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
//壓縮js檔案
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//引入webpack
const webpack = require('webpack');
module.exports = {
//webpack 入口檔案
entry: './src/index.js',
//webpack 輸出檔案配置
output: {
//輸出檔案路徑
path: path.resolve(__dirname, 'dist'),
//輸出檔名
filename: 'k-editor.[hash:8].js',
},
//配置外掛
plugins: [
//使用外掛清除dist資料夾中的檔案
new CleanWebpackPlugin({
path: './dist'
}),
//使用外掛生成Html入口檔案
new HtmlWebpackPlugin({
//模板檔案路徑
template: "./src/index.html",
//模板檔名
filename: "index.html",
minify: {
removeAttributeQuotes: true, //刪除雙引號,
collapseWhitespace: true, //壓縮成一行，
},
hash: true
}),
//提取css到style.css中
new MiniCssExtract({
filename: 'style.css'
}),
],
resolve: {
// modules: [path.resolve('node_modules')],//只在當前目錄下查詢
alias: { //別名
'bootstrap': 'bootstrap/dist/css/bootstrap.css',
},
// mainFields: ['style', 'main'],//優先尋找style，
// mainFiles: [],//入口檔案的名字,預設index.js
// extensions: ['js', 'css', 'json', 'vue']//副檔名順序
},
//loader載入器模組配置
module: {
rules: [
{
//正則表示式匹配.css為字尾的檔案
test: /\.css$/,
//使用loader
use: [
MiniCssExtract.loader,
'css-loader',
{
loader: "postcss-loader"
},
]
//正則表示式匹配.less為字尾的檔案
//使用lodaer來處理
}, {
test: /\.less$/,
use: [
MiniCssExtract.loader,
'css-loader',
{
loader: "postcss-loader"
},
'less-loader'
]
},
/* {
test: /\.js$/,
//不包括node_modules
exclude: /node_modules/,
use: [{
loader: "eslint-loader",
options: {
enforce: 'pre' //強制更改順序，pre 前 post 後
}
}],
},*/
{
test: /\.js$/, //普通的loader
//不包括node_modules
exclude: /node_modules/,
use: [{
loader: "babel-loader"
}]
},
{
test: /\.html$/,
use: ['html-withimg-loader']
},
{
test: /\.(gif|png|jpg)$/,
use: [{
loader: "url-loader",
options: {
//圖片小於10kb就是圖片地址，大於正常打包成base64格式編碼
limit: 10000,
//輸出路徑
outputPath: 'img/'
}
}]
}
]
},
};
webpack.dev.conf.js：
//引入webpack-merge外掛進行合併
const {merge} = require('webpack-merge');
//引入webpack.base.conf.js檔案
const base = require('./webpack.base.conf');
//引入webpack
const webpack = require('webpack');
//進行合併，將webpack.base.conf.js中的配置合併到這
module.exports = merge(base, {
//模組引數
mode: 'development',
devServer: {
contentBase: './dist',
//埠號
port: '8383',
inline: true,
historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
hot: true//允許熱載入
},
//啟用source-map方便除錯
devtool: 'source-map',
plugins: [
//定義全域性變數
new webpack.DefinePlugin({
//這裡必須要解析成字串進行判斷，不然將會被識別為一個變數
DEV: JSON.stringify('dev')
})
]
});
webpack.prod.conf.js:
const {merge} = require('webpack-merge');
const base = require('./webpack.base');
const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = merge(base, {
mode: 'production',
optimization: {
minimizer: [
//壓縮CSS程式碼
new OptimizeCss(),
//壓縮js程式碼
new UglifyJsPlugin({
//啟用檔案快取
cache: true,
//使用多執行緒並行執行提高構建速度
parallel: true,
//使用 SourceMaps 將錯誤資訊的位置對映到模組
sourceMap: true
})
]
},
plugins:[
//使用外掛定義全域性變數DEV
new webpack.DefinePlugin({
DEV:JSON.stringify('production')
})
]
});
最後在配置一下package.json檔案就可以了：
"scripts": {
"test": "npm run test",
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
就這樣，我們就實現了利用webpack來區分開發環境和生產環境，當我們用npm run dev執行的時候就是開發環境，當我們執行npm run build的時候就是構建生產環境打