webpack.DefinePlugin与cross-env常用于在项目工程化中定义环境变量,webpack.DefinePlugin用于在编译期定义环境变量,意味着在代码中写上process.env.NODE_ENV不会在编译期出现错误提醒;cross-env库用于在运行时定义环境变量
DefinePlugin用来做定义。这就类似于我们项目开发中的config文件一样,在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息,我们将这些信息提取出来单独放在配置文件中,方便于后期的维护和管理。
// dev.env.js module.exports = { NODE_ENV: 'development' } // prod.env.js module.exports = { NODE_ENV: 'production' }
// webpack配置 const env = require('../config/dev.env') module.exports = { entry: {}, output: {}, resolve: { extensions: ['.js'] } module: {}, plugins: [ new webpack.DefinePlugin({ 'process.env': env.NODE_ENV }) ] }
// package.json { "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build": "node build/build.js", "build:development": "cross-env NODE_ENV=dev node build/build.js", "build:test": "cross-env NODE_ENV=test node build/build.js", "build:pre": "cross-env NODE_ENV=pre node build/build.js", "build:prod": "cross-env NODE_ENV=prod node build/build.js" } }