第一种方法:
方法出处:命令行接口(CLI) | webpack 中文文档
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: '_',}
};
}
第二种方法:
1. 安装 cross-env
npm install cross-env -D
2. 在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 中文文档