webpack生產環境和開發環境的配置

最近在做公司遊戲預約頁面的時候，在配置webpack的時候，忽略了生產模式切換，導致開發過程中有些痛苦，當改動樣式或者某個外掛程式配置時，本地server要等待編譯很久才生效。用了很久的webpack做開發，之前一直沒太在意，現在特地整理下，也為以後做專案更加規範吧。

在配置前，還是先了解下生產環境和開發環境有哪些區別，知道這些後，才知道我們到底要做些什麼

雖然，以上我們將生產環境和開發環境做了略微區分，但是，請注意，我們還是會遵循不重複原則(don't repeat yourself - dry)，保留乙個「通用」配置。為了將這些配置合併在一起，我們將使用乙個名為webpack-merge的工具。通過「通用」配置，我們不必在環境特定(environment-specific)的配置中重複**

那麼，開始配置檔案的編寫。這裡，我們把公共的配置，放到webpack.common.js中，生產環境配置放到webpack.prod.js中，開發環境配置放到webpack.dev.js中。

公共配置（webpack.common.js）中，我們常用的外掛程式，入口、輸出檔案、模組配置

const path = 
require(
'path');
const cleanwebpackplugin = 
require(
'clean-webpack-plugin');
const htmlwebpackplugin = 
require(
'html-webpack-plugin');
module.exports = ,
plugins: [
new cleanwebpackplugin([
'dist']),
new htmlwebpackplugin()
],module: ]},
output: 
}

生產配置（webpack.prod.js）中配置"source-map"，生產環境下的外掛程式，然後合併

const merge = 
require(
'webpack-merge');
const webpack = 
require(
'webpack');
const uglifyjsplugin = 
require(
'uglifyjs-webpack-plugin');
const common = 
require(
'./webpack.common');
module.exports = merge(common, ),
new webpack.defineplugin()]})

注意這裡使用了webpack.defineplugin()外掛程式，來指定環境。這是因為，許多 library 將通過與process.env.node_env環境變數關聯，以決定 library 中應該引用哪些內容。例如，當不處於生產環境中時，某些 library 為了使除錯變得容易，可能會新增額外的日誌記錄(log)和測試(test)。其實，當使用process.env.node_env === 'production'時，一些 library 可能針對具體使用者的環境進行**優化，從而刪除或新增一些重要**

開發環境（webpack.dev.js）中配置"inline-source-map"、本地伺服器，然後合併公共配置

const merge = 
require(
'webpack-merge');
const common = 
require(
'./webpack.common.js');
module.exports = merge(common, 
})

現在，我們可以在package.json中為生產和開發模式配置單獨的執行指令碼，

webpack生產環境和開發環境的配置

webpack開發環境和生產環境打包

webpack開發環境和生產環境切換原理

webpack環境開發環境和生產環境的區分

webpack生產環境和開發環境的配置

webpack開發環境和生產環境打包

webpack開發環境和生產環境切換原理

webpack環境 開發環境和生產環境的區分

相關推薦

webpack環境開發環境和生產環境的區分