webpack 如何区分开发环境和生产环境

qq_411671982025-06-19 16:25

第一种方法:

1.利用webpack.config.js 返回的是个函数，利用函数的参数，来区分环境

具体步骤

1） package.json文件：在npm scripts 命令后面追加 --node-env production/development

复制代码

  "build": "webpack --config webpack.config.js --node-env development"

2）webpack.config.js 是个函数形式，可以看到函数有两个参数，把参数都打印出来看看，可以看到process.nodeEnv 既是上述 --node-env 后面设置的值

复制代码

const path = require('path');
module.exports = (env,process)=>{
  console.log('Production: ', env); 
  console.log('process',process);
  console.log(process.nodeEnv);
  return {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-numbers-test.js',
    library: {
      type:'umd',
      name:"webpackNumbersTest"
    },
    globalObject: 'this',
    clean:true
  },
  externals:{
    commonjs: 'lodash',
    commonjs2: 'lodash',
    amd: 'lodash',
    root: '_',
  }
};
}

第二种方法：

安装 cross-env

npm install cross-env -D
在package.json npm scripts 前面追加 cross-env NODE_ENV=production/development

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

3.即可在webpack.config.js 中访问 process.env.NODE_ENV

第三种方法

将公共的，生产和开发的不同抽离出来，利用webpack-merge 进行合并

方法出处：生产环境 | webpack 中文文档