重构之路：webpack区分生产环境和开发环境

开始

咱们如今的配置都是写在一个webpack.config.js文件夹里，可是实际上，咱们在开发环境和生产环境中使用的配置是不同的，好比生产环境中咱们须要包的体积不能很大，否则在线上响应会变慢。因此咱们须要将生产环境和开发环境分开来。

cross-env

在node里，咱们有一个process对象，它里面包括了node的一些信息，env和它的一个属性，可是并无process.env.NODE_ENV，这是咱们本身添加的一个用来区分环境的变量，咱们经过这个来区分生产开发环境。

可是不一样电脑上设置的方式是不同的，因此cross-env就来了，它能够跨平台设置环境和使用环境变量。

咱们须要在控制台执行：

yarn add cross-env -D
复制代码

而后咱们在package.json里配置：

"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server"
复制代码

咱们在webpack.config.js里添加：

const NODE_ENV=process.env.NODE_ENV;
console.log("--------"+NODE_ENV+"-----------");
复制代码

而后去控制台执行，当执行yarn run build时：

控制台打印出了咱们设置的production。

执行yarn run dev的时候：

打印出了devlopment，说明咱们已经设置完成了。

webpack-merge

设置了环境以后咱们须要将配置分开，咱们先在根目录下新建==webpack.config.dev.js==（开发环境），==webpack.config.prod.js==（生产环境），将本来的webpack.config.js修改为==webpack.config.common.js==（公共）。

分离开的环境须要和common里的代码合并使用，因此咱们就须要用到webapck-merge插件，咱们在控制台执行：

yarn add webpack-merge -D
复制代码

下载好后先去package.json里修改配置：

//--config是能够设置咱们执行哪一个webpack文件，默认是执行webpack.config.js,可是咱们如今修改文件名了，因此咱们要设置一下
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js"
复制代码

咱们将一些开发环境用到的东西移到==webpack.config.dev.js==里：

const path=require('path');
const webpack=require('webpack');
const merge=require('webpack-merge');//这里引入merge
const common=require('./webpack.config.common.js');//这里引入公共代码

module.exports=merge(common,{//注意这里的写法
    mode:'development',
    devtool:'cheap-module-eval-source-map',
    module:{
        rules:[

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,//开启gzip压缩
        port: 8080,
        open:true,
        hot:true,
        overlay:true,
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
    ]
})
复制代码

生产环境的移到==webpack.config.prod.js==：

const merge=require('webpack-merge');
const webpack=require('webpack');
const common=require('./webpack.config.common.js');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin  = require('clean-webpack-plugin');

module.exports=merge(common,{
    mode:'production',
    module:{
        rules:[

        ]
    },
    plugins:[
        new MiniCssExtractPlugin({//提取css
            filename:'css/main.css'
        }),
        new CleanWebpackPlugin('./dist'),//删除dist目录下的文件
        new BundleAnalyzerPlugin({ analyzerPort: 8090 }),

    ]
})
复制代码

而后去==webpack.config.common.js==里将相关代码删除就好了。

这里还有个注意点，在使用MiniCssExtractPlugin.loader的时候是不支持热更新的，因此咱们须要根据环境来区分这个，咱们在==webpack.config.common.js==里修改一下：

//开发环境使用style-loader
{
loader:NODE_ENV==="production" ? MiniCssExtractPlugin.loader : "style-loader"
}
复制代码