javascript - webpack怎么实现使用不同命令打包执行不同打包策略？

Question

webpack怎么实现使用不同命令打包执行不同打包策略

比如：
在测试服务器上想要打不取消source-map的包，而在上传正式服务器上时执行取消soure-map的打包

有没有大佬知道？

Answer 1

就是判断一下当前的 process.env.NODE_ENV 如果你在测试环境编译的是非生产环境配置的话。

module.exports = {  ...  devtool: process.env.NODE_ENV === 'production' ? 'none' : 'source-map',}

如果是VueCLI默认非生产环境就是开启 sourceMap 的，npm run build 的时候使用 --mode 指定一下环境模式就好了。

Answer 2

Webpack 可以通过配置不同的命令来执行不同的打包策略。你可以在命令行参数中传递不同的配置文件，或者使用不同的环境变量来调整打包行为。

下面是一个示例，展示了如何使用不同的命令和环境变量来实现不同的打包策略：

1. 在你的 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  },};

2. 在命令行中使用不同的参数来选择配置文件：

生产环境：webpack --config webpack.config.prod.js
开发环境：webpack --config webpack.config.dev.js

3. 你还可以使用环境变量来动态切换配置。在命令行中设置环境变量，然后在配置文件中使用该环境变量来选择相应的配置：

设置环境变量：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 （通过设置环境变量来选择开发环境的配置）