一個十分簡單的、關於生產環境和開發環境的webpack配置

標籤：ret   簡潔   ack   vue   turn   頁面   詳細介紹   ini   script   

關於這個開發環境和生產環境的配置代碼，之所有要分開是因為他們有些代碼相同，有的又不同。

例如：開發模式下需要啟動本機伺服器，需要熱重載，而生產模式不需要這些需要代碼壓縮、DefinePlugin等。

我們都是將兩種環境都用用到的提取出來，放在一個公用.js檔案。然後在相應的環境配置中使用  webpack-merge  將公用js合并進來。

 

我所瞭解到的配置思路，有兩種：

方法一： 使用webpack-dev-server配置開發環境（這個簡潔一些）；

方法二： 使用webpack-dev-middleware 和 webpack-hot-middleware配置開發環境；( 應該是我們經常用到的，因為vue-cli就是用的這個 )；

 

方法一可直接參考這個——webpack官方文檔的詳細介紹  

先看看項目結構

 

方法二：

使用webpack-dev-middleware 和 webpack-hot-middleware手動設定自動重新整理和熱重載。也就需要用node來啟動；

因為本身webpack-dev-server就是通過這兩個node中介軟體加上express實現的。這個可自行百度驗證。

 

我們通過執行過程來看這個是怎麼搭建的。

啟動命令：

  "scripts": {    "dev": "set NODE_ENV=development&& node build/webpack-env.js",    "build": "set NODE_ENV=prodction&& node build/webpack-env.js"  },

　　不同命令下設定的環境變數不同（這裡的NODE_ENV，在webpack-env.js中通過process.env.NODE_ENV訪問）；

       注意： liunx和mac下使用  export  而不是 set；

來到了我的入口檔案裡面：

var path = require(‘path‘);var webpack = require(‘webpack‘);var app = require(‘express‘)();var devConfig = require(‘./webpack.dev.js‘);  //匯入開發環境配置var prodConfig = require(‘./webpack.prod.js‘);   //匯入生產環境配置var compiler = webpack(devConfig);var env = process.env.NODE_ENV;  //擷取我們在package.json裡面設定的環境變數var port = ‘8000‘;(function() {  //生產環境  if (env == ‘prodction‘) {
    //如果是生產環境，直接打包，然後退出這個匿名函數，否則執行開發環境邏輯    webpack(prodConfig, function(err, status) {      if (err) throw err;    });    return;  }    //開發環境  //設定‘webpack.common.js’的入口配置  Object.keys(devConfig.entry).forEach(function(key) {
    //這裡的reload=true，作用就是頁面自動重新整理    devConfig.entry[key] = [‘webpack-hot-middleware/client?reload=true‘].concat(devConfig.entry[key]);  })  var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, {    stats: {      colors: true,  //設定日誌顏色    }  });  var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler);  app.use(devMiddleware);  app.use(hotMiddleware);  //首次編譯後的回呼函數  devMiddleware.waitUntilValid(function() {    console.log("listen at localhost:" + port);    //自動開啟瀏覽器    require(‘opn‘)(‘http://localhost:‘ + port);  });  app.listen(port);})();

 

如果是開發環境，執行webpack-dev.js：

const Merge = require(‘webpack-merge‘);const webpack = require(‘webpack‘);const CommonConfig = require(‘./webpack.base.js‘);  //匯入公用基礎配置
//使用“webpack-merge”將公用配置和生產配置合并module.exports = Merge(CommonConfig, {  plugins: [    new webpack.HotModuleReplacementPlugin(),  ]})

我在這個生產環境下添加了一個它專屬的  熱重載時所需的外掛程式，可以在這個基礎上添加更多。

 

如果是生產環境，執行webpack-prod.js：

const Merge = require(‘webpack-merge‘);const webpack = require(‘webpack‘);const CommonConfig = require(‘./webpack.base.js‘);module.exports = Merge(CommonConfig, {  plugins: [    new webpack.LoaderOptionsPlugin({      minimize: true,      debug: false    }),    new webpack.DefinePlugin({      //打包過後會將index.js等檔案內的 ‘process.env.NODE_ENV’ 替換為 ‘production’      ‘process.env‘: {        ‘NODE_ENV‘: JSON.stringify(‘production‘)      }    }),    new webpack.optimize.UglifyJsPlugin({      beautify: false,      mangle: {        screw_ie8: true,        keep_fnames: true      },      compress: {        screw_ie8: true      },      comments: false    })  ]})

這個也是同理。

 

環境環境變數可以用專門的檔案來設定，而不用設定到package.json。但是比較懶。。。

這個主要體現生產和開發是如何分離的。一些我們常用的熟悉的loader以及外掛程式，都可以在這個基礎上添加。所以我就不過多闡述。

 

項目地址：https://github.com/liyang0612/light-complete-webpack

一個十分簡單的、關於生產環境和開發環境的webpack配置