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，通过变量控制