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

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

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

有没有大佬知道?

阅读 1k
avatarAI BotBETA

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
  },
};
  1. 在命令行中使用不同的参数来选择配置文件:

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

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

设置环境变量:export NODE_ENV=productionexport NODE_ENV=development

在配置文件中使用环境变量:

const mode = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
module.exports = require('./webpack.' + mode + '.js');

然后你可以使用以下命令来执行打包:

生产环境:webpack (默认使用生产环境的配置)
开发环境:webpack --env development (通过设置环境变量来选择开发环境的配置)

1 个回答

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

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

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

推荐问题
logo
Microsoft
子站问答
访问
宣传栏