webpack怎么实现使用不同命令打包执行不同打包策略
比如:
在测试服务器上想要打不取消source-map的包,而在上传正式服务器上时执行取消soure-map的打包
有没有大佬知道?
比如:
在测试服务器上想要打不取消source-map的包,而在上传正式服务器上时执行取消soure-map的打包
有没有大佬知道?
Webpack 可以通过配置不同的命令来执行不同的打包策略。你可以在命令行参数中传递不同的配置文件,或者使用不同的环境变量来调整打包行为。
下面是一个示例,展示了如何使用不同的命令和环境变量来实现不同的打包策略:
webpack.config.js
)中,定义两个不同的配置对象,一个用于生产环境,一个用于开发环境:const path = require('path');
module.exports = {
// 开发环境配置
dev: {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: 'source-map', // 启用 source-map
},
// 生产环境配置
prod: {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.min.js',
},
devtool: 'none', // 取消 source-map
},
};
生产环境:webpack --config webpack.config.prod.js
开发环境:webpack --config webpack.config.dev.js
设置环境变量:export NODE_ENV=production
或 export NODE_ENV=development
在配置文件中使用环境变量:
const mode = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
module.exports = require('./webpack.' + mode + '.js');
然后你可以使用以下命令来执行打包:
生产环境:webpack
(默认使用生产环境的配置)
开发环境:webpack --env development
(通过设置环境变量来选择开发环境的配置)
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
4 回答2.3k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
就是判断一下当前的
process.env.NODE_ENV
如果你在测试环境编译的是非生产环境配置的话。如果是VueCLI默认非生产环境就是开启
sourceMap
的,npm run build
的时候使用--mode
指定一下环境模式就好了。