webpack開發模式與生產模式的區別
webpack的development（開發模式）和production（生產模式）是兩種常見的構建環境配置，主要區別體現在構建速度、代碼優化和調試支持等方面。
開發模式 (development)
- 目標：注重開發效率和調試體驗。
- 特性：
- 不壓縮代碼，保留源代碼格式和注釋。
- 啟用
eval或source-map生成完整的source map，便于調試。 - 保留
process.env.NODE_ENV為'development'，供庫和框架識別環境。 - 啟用HMR（模塊熱替換）和更快的構建速度。
生產模式 (production)
- 目標：優化代碼體積和性能。
- 特性：
- 啟用代碼壓縮（如TerserPlugin）、Tree Shaking和Scope Hoisting。
- 生成輕量級source map或不生成（根據配置）。
- 設置
process.env.NODE_ENV為'production'，觸發庫的優化邏輯（如React移除PropTypes）。 - 拆分代碼（Code Splitting）和緩存優化（文件名哈希）。
如何配置模式
在webpack配置文件中通過mode字段直接指定：
// webpack.config.js
module.exports = {mode: 'development', // 或 'production'// 其他配置...
};
或通過命令行參數傳遞：
webpack --mode=production
注意事項
- 環境變量：可通過
webpack.DefinePlugin自定義全局變量，例如：new webpack.DefinePlugin({'process.env.API_URL': JSON.stringify('https://dev.example.com'), }); - 覆蓋默認優化：生產模式下webpack會自動啟用優化插件，如需調整，可通過
optimization字段覆蓋：optimization: {minimize: false, // 禁用壓縮（不推薦）splitChunks: { chunks: 'all' }, // 自定義代碼拆分 } - 開發工具：開發模式下推薦使用
webpack-dev-server或webpack-hot-middleware實現實時重載。
擴展：區分環境的配置
可使用webpack-merge拆分不同環境的配置：
- 創建通用配置（
webpack.common.js）。 - 開發配置（
webpack.dev.js）合并通用配置并添加開發插件（如HotModuleReplacementPlugin）。 - 生產配置（
webpack.prod.js）合并通用配置并添加優化插件（如MiniCssExtractPlugin）。
通過--config指定配置文件：
webpack --config webpack.prod.js
"build": "webpack --mode=production",
"dev": "webpack serve --mode=development"
