webpack-merge的使用教程
為什么要用webpack-merge
- development(開發(fā)環(huán)境) 和 production(生產環(huán)境) 這兩個環(huán)境下的構建目標存在著巨大差異
所以webpack的配置寫的差距會非常的大
- 在開發(fā)環(huán)境中,我們需要:強大的 source map 和一個有著 live reloading(實時重新加載) 或 hot module replacement(熱模塊替換) 能力的 localhost server。
- 而生產環(huán)境目標則轉移至其他方面,關注點在于壓縮 bundle、更輕量的 source map、資源優(yōu)化等,通過這些優(yōu)化方式改善加載時間。由于要遵循邏輯分離,我們通常建議為
每個環(huán)境編寫彼此獨立的 webpack 配置。
- 雖然,以上我們將 生產環(huán)境 和 開發(fā)環(huán)境 做了細微區(qū)分,但是,請注意,我們還是會遵循不重復寫配置的原則,保留一個
"common( 公共 )" 配置
。為了將這些配置合并在一起,我們將使用一個名為webpack-merge
的工具。此工具會引用 “common” 配置,因此我們不必再在環(huán)境特定env
的配置中編寫重復代碼。
安裝
npm install --save-dev webpack-merge
目錄結構
webpack-demo |- package.json |- package-lock.json - |- webpack.config.js // 刪除全局webpack配置 + |- webpack.common.js // 新建公共配置 + |- webpack.dev.js // 新建開發(fā)環(huán)境配置 + |- webpack.prod.js // 新建生產環(huán)境配置 |- /dist |- /src |- index.js |- math.js |- /node_modules
webpack.common.js 公共配置
const path = require('path'); // 該插件將為你生成一個 HTML5 文件, // 在 body 中使用 script 標簽引入你所有 webpack 生成的 bundle。 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: './src/index.js', }, plugins: [ new HtmlWebpackPlugin({ title: 'Production', }), ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, };
webpack.dev.js 開發(fā)環(huán)境配置
// 引入webpack-merge const { merge } = require('webpack-merge'); // 引入公共配置 const common = require('./webpack.common.js'); // 第一個參數(shù)是公共配置 第二個參數(shù)是環(huán)境里的配置 module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { static: './dist', }, });
webpack.prod.js 生產環(huán)境配置
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', });
- 現(xiàn)在,在 webpack.common.js 中,我們設置了 entry 和 output 配置,并且在其中引入這兩個環(huán)境公用的全部插件。
- 在 webpack.dev.js 中,我們將 mode 設置為 development,并且為此環(huán)境添加了推薦的 devtool(強大的 source map)和 devServer 配置。
- 最后,在 webpack.prod.js 中,我們將 mode 設置為 production,
注意,在環(huán)境特定的配置中使用 merge() 功能,可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各種 merge(合并) 高級功能,但是在我們的用例中,無需用到這些功能。
到此這篇關于webpack-merge的使用的文章就介紹到這了,更多相關webpack-merge的使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript使用structuredClone實現(xiàn)深拷貝
在JavaScript中,實現(xiàn)深拷貝的方式有很多種,每種方式都有其優(yōu)點和缺點,今天介紹一種原生JavaScript提供的structuredClone實現(xiàn)深拷貝,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2024-03-03TypeScript 獲取函數(shù)的參數(shù)類型、返回值類型及定義返回函數(shù)類型
這篇文章主要介紹了TypeScript 獲取函數(shù)的參數(shù)類型、返回值類型及定義返回函數(shù)類型,需要的朋友可以參考下2024-02-02