webpack.DefinePlugin与cross-env常用于在项目工程化中定义环境变量，webpack.DefinePlugin用于在编译期定义环境变量，意味着在代码中写上process.env.NODE_ENV不会在编译期出现错误提醒；cross-env库用于在运行时定义环境变量

// 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"
    }
}

链接: https://www.fly63.com/article/detial/7600