重構之路：webpack區分生產環境和開發環境

web999_Z發表於2019-02-19
Web開發環境

開始

我們現在的配置都是寫在一個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"
}
複製程式碼

相關文章