重構之路：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" }

 

轉載： http://www.javashuo.com/article/p-roqoardd-gx.html