webpack中環境變量的使用方法

這節課講解一下，在webpack打包過程中，怎么去使用一些環境變量。

首先我有一個打包配置的三個文件

"scripts": {
　　"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
　　"dev": "webpack-dev-server --config ./build/webpack.dev.js",
　　"build": "webpack --config ./build/webpack.prod.js"
},

對應三個命令，分別是開發環境的一個命令 npm run dev。打包生成開發環境代碼的命令 npm run dev-build。以及線上代碼生成的一個命令 npm run build。現在我要借助兩個配置文件來幫助我們去完成對應的打包，分別是dev對應配置文件和prod對應的配置文件。現在我可以通過另外一種形式來對代碼進行一次變更。

webpack.dev.js

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


const devConfig = {　　
　　mode: 'development',
　　devtool: 'cheap-module-eval-source-map',
　　devServer: {
　　　　contentBase:'./dist',
　　　　open:true,
　　　　hot: true
　　},
　　plugins: [
　　　　new webpack.HotModuleReplacementPlugin()
　　],
　　output: {
　　　　filename: '[name].js',
　　　　chunkFilename: '[name].chunk.js',
　　}
}
module.exports = merge(commonConfig, devConfig);

這是dev配置原始文件，其中引入了merge和commonConfig。現在我把他刪掉，直接導出devConfig

 

webpack.dev.js

const webpack = require('webpack');
const devConfig = {
}
module.exports = devConfig;

prod也做同樣的處理，這樣我導出的就不是融合過后的文件。而是自己獨立的配置文件。接着我們打開webpack.common.js，去引入merge，dev和prod

 

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const merge = require('webpack-merge');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');


const commonConfig = {
}


module.exports = (env) => {
　　// 如果有這個全局變量，且是線上環境，否則是開發環境
　　if(env && env.production) {
　　　　return merge(commonConfig, prodConfig);
　　} else {
　　　　return merge(commonConfig, devConfig);
　　}
}

以前我們導出一個對象，這里我們導出一個函數，接收一個全局變量，怎么融合取決於傳遞進來的變量。是否有全局變量，是哪個環境決定

package.json

"scripts": {
　　"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.common.js",
　　"dev": "webpack-dev-server --config ./build/webpack.common.js",
　　"build": "webpack --env.production --config ./build/webpack.common.js"
},

package.json里面走的都是webpack.common.js了。在build里面加入--env.production。其他不加默認走devConfig。各自運行。沒問題。這樣就不是通過不同的文件，而是都是走common，通過變量控制