重構之路：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"
}
複製代碼