# 生产环境

线上环境与开发环境的差异就是更小、更快

# 配置

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。

所以我们需要将配置文件独立开,然鹅,完全独立就会显得很不灵活,

npm install --save-dev webpack-merge

所以新的开发环境配置

// webpack.config.dev.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config');

module.exports = merge(base, {
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        hot: true
    }
})

生产环境

// webpack.config.prod.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config');

module.exports = merge(base, {
    mode: 'production',
    devtool: 'source-map'
})

scripts

"scripts": {
    "build": "webpack --config config/webpack.config.prod.js",
    "dev": "webpack-dev-server --config config/webpack.config.dev.js"
},

# 获取开发模式或生产环境

if(process.env.NODE_ENV === 'development') {
    console.log("当前处于开发模式");
}