1.使用 cli 设置环境变量
在 webpack 配置文件中可以直接导出一个配置对象。
还可以导出一个函数,在函数中返回一个配置对象。并且函数可以接收一个 env
参数,我们可以在启动 webpack 时,在 cli 命令中传递变量,而 env
属性可以接收到传递的变量。
// 可以在 env 变量中获取 name 变量的值
npx webpack --env name=zhenYuFeng
// 如果只声明了变量未赋值, 那么它的值就是 true
npx webpack --env production
那么我们可以根据传递进来的变量,分别设置 开发环境
和 生产环境
的配置。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env) => {
// 生产环境
const config = {
mode: "production",
entry: './src/main.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.css$/i,
// 在生产环境中, 将Css单独提取出来
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'static/css/[name].css',
}),
],
};
// 判断当前是否为 开发环境
if (env.development) {
config.mode = "development";
// 将 css 不单独提取出来, 而是挂载到 style 标签, 这样更快
config.module.rules[0].use[0] = 'style-loader';
delete config.plugins[0];
}
return config;
};
接下来可以直接在 package.json 中进行配置命令启动即可。
2.创建多环境配置文件
我们可以创建 公共
、开发
、生产
三个配置文件,最后在根据命令来指定运行哪个环境的配置文件。
在此之前我们需要安装一个合并工具,在开发和生产中,由此工具来合并公共
配置对象。
npm install --save-dev webpack-merge
然后我们在 config 文件夹下,新建关于这三个的配置文件。
公共配置:webpack.common.js
开发环境:webpack.dev.js
生产环境:webpack.prod.js
我们首先在公共配置
中进行编写,该文件直接导出该配置对象。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'static/js/[name].js',
path: path.resolve(__dirname, '../dist'),
clean: true,
},
module: {
rules: [
{
test: /.(png|jpe?g|gif|webp)$/i,
type: 'asset',
generator: {
filename: 'static/images/[name][ext]',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack App',
template: './src/index.html',
inject: 'body',
}),
],
};
然后在 webpack.dev.js
和 webpack.prod.js
配置文件中,都需要引入 webpack.common.js
和 webpack-merge
。
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development'
});
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'production'
});
这样我们就可以区分环境,从而实现不同环境的配置了。在生产环境我们更注重代码的压缩,在开发环境更注重开发效率的配置。
我们可以通过配置 npm 脚本,或者使用 npx 命令去启动。
// 打包:开发环境
npx webpack --config ./config/webpack.dev.js
// 打包:生产环境
npx webpack --config ./config/webpack.prod.js
// 在线运行: 开发环境
npx webpack serve --config ./config/webpack.dev.js
"scripts": {
"build:dev": "webpack --config ./config/webpack.dev.js",
"build:prod": "webpack --config ./config/webpack.prod.js",
"start:dev": "webpack serve --config ./config/webpack.dev.js",
"start:prod": "webpack serve --config ./config/webpack.prod.js"
},
评论 (0)