webpack 环境变量 区分环境

webpack.DefinePlugin

有时我们需要根据运行的是开发环境还是生产环境对变量进行定义，那么我
们就可以使用webpack自带的插件 webpack.DefinePlugin；来创建一个全局变量
例如：

	// index.js
	let url;
	if(DEV === 'dev') {
		url = 'http://localhost:3000'
	}else {
		url = 'https://www.baidu.com/'
	}
	console.log(typeof FLAG) // boolean
	console.log(EXPRESSION) // 2

	// webpack.confing.js 配置
	plugins:{
		new webpack.DefinePlugin({
			DEV: JSON.stringfiy('dev'), // 字符串
			FLAG: 'true', // 布尔值
			EXPRESSION：'1+1', // 表达式
		})
	}

区分环境

不同的环境我们有时会使用不同的插件，打包压缩等等；我就会可以使用两个webpack配置文件一个是生产环境的配置文件一个是开发环境的配置文件；那么我们可以将公共的部分在整理出来，然后与另外两个配置文件进行合并。那么可以使用webpack-merge插件。
cnpm i webpack-merge -D

公共配置 对文件的处理

//webpack.base.js 
 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                	// ...
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    // ...
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
           //...
        }),
        new CleanWebpackPlugin()
    ]
};

开发环境时webpack配置

// config.dev.js
let { smart } = require('webpack-merge');
const common = require('./webpack.base.js');

let devConfig = {
  mode:'development',
  devtool: 'source-map',
  devServer:{/* ... */}
};
module.exports = smart(common,devConfig);

生产环境时的配置

// config.prod.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css到单独文件的插件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');//压缩js文件
let { smart } = require('webpack-merge');
const common = require('./webpack.base.js');

let prodConfig= {
    mode: 'production',
    module: {
        rules: [
            // ...
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ // 压缩文件
            // ...
        })
    ],
    optimization: { // 优化项
        // ...
    }
};
module.exports = merge(common,prodConfig);

package.json 中配置脚本

"dev": "webpack --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"