使用webpack根據不同的環境打包

前提

我們在進行項目開發的時候，一般在不同的環境下面使用不同的代碼分支，常見的有dev-開發分支、test-測試分支、uat-準生產分支、prod-生產分支，生產分支和準生產分支基本上是一樣的。dev分支一般作爲本地的開發分支使用，連接相關的ip進行相關調試的代碼本地聯調，測試環境就是對接的測試環境的ip或者域名進行測試聯調，生產分支作爲線上分支使用，供外部使用。
但是我們進行前端開發的時候，通常要區分環境進行打包。在本地開發環境和測試環境對代碼的解壓與生產環境的會有大小的區別，希望加載的越快越好，這裏webpack的不同環境打包的用途就應運而生了。

準備工作

webpack的多環境開發打包，，會使用到相關的npm包。
我們需要安裝：webpack-merge
使用npm install --save-dev webpack-merge

工作目錄結構

我們在項目的根路徑創建一個build目錄，存放不同的配置文件，如下：

編寫common.js

這個js中的webpack配置爲公共的webpack的配置，如文件加載，css加載等的 方式及其一些公共組件的引入

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

module.exports = {
 entry: {
    app: './src/index.js',
},
plugins: [
// new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
 new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
   title: 'titles',
 }),
],
output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},
};

dev.js,tenv.js,prod.js

在不同的文件中引入common.js的公共配置
dev.js:
const merge = require(‘webpack-merge’);
const common = require(’./webpack.common.js’);

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
devServer: {
 contentBase: './dist',
},
});

prod.js

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

module.exports = merge(common, {
  mode: 'production',
});

不同的環境配置，可以自行調整。

進行打包配置

修改更目錄下package.json文件

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
     "start": "webpack-dev-server --open --config ./build/webpack.dev.js",
     "build": "webpack --config ./build/webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
      "clean-webpack-plugin": "^0.1.17",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.30.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0",
      "xml-loader": "^1.2.1"
	}
}

這樣每次打包的時候，就可以根據不同的腳本進行打包。