webpack-merge的使用教程
為什么要用webpack-merge
- development(開(kāi)發(fā)環(huán)境) 和 production(生產(chǎn)環(huán)境) 這兩個(gè)環(huán)境下的構(gòu)建目標(biāo)存在著巨大差異
所以webpack的配置寫(xiě)的差距會(huì)非常的大
- 在開(kāi)發(fā)環(huán)境中,我們需要:強(qiáng)大的 source map 和一個(gè)有著 live reloading(實(shí)時(shí)重新加載) 或 hot module replacement(熱模塊替換) 能力的 localhost server。
- 而生產(chǎn)環(huán)境目標(biāo)則轉(zhuǎn)移至其他方面,關(guān)注點(diǎn)在于壓縮 bundle、更輕量的 source map、資源優(yōu)化等,通過(guò)這些優(yōu)化方式改善加載時(shí)間。由于要遵循邏輯分離,我們通常建議為
每個(gè)環(huán)境編寫(xiě)彼此獨(dú)立的 webpack 配置。
- 雖然,以上我們將 生產(chǎn)環(huán)境 和 開(kāi)發(fā)環(huán)境 做了細(xì)微區(qū)分,但是,請(qǐng)注意,我們還是會(huì)遵循不重復(fù)寫(xiě)配置的原則,保留一個(gè)
"common( 公共 )" 配置
。為了將這些配置合并在一起,我們將使用一個(gè)名為webpack-merge
的工具。此工具會(huì)引用 “common” 配置,因此我們不必再在環(huán)境特定env
的配置中編寫(xiě)重復(fù)代碼。
安裝
npm install --save-dev webpack-merge
目錄結(jié)構(gòu)
webpack-demo |- package.json |- package-lock.json - |- webpack.config.js // 刪除全局webpack配置 + |- webpack.common.js // 新建公共配置 + |- webpack.dev.js // 新建開(kāi)發(fā)環(huán)境配置 + |- webpack.prod.js // 新建生產(chǎn)環(huán)境配置 |- /dist |- /src |- index.js |- math.js |- /node_modules
webpack.common.js 公共配置
const path = require('path'); // 該插件將為你生成一個(gè) HTML5 文件, // 在 body 中使用 script 標(biāo)簽引入你所有 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 開(kāi)發(fā)環(huán)境配置
// 引入webpack-merge const { merge } = require('webpack-merge'); // 引入公共配置 const common = require('./webpack.common.js'); // 第一個(gè)參數(shù)是公共配置 第二個(gè)參數(shù)是環(huán)境里的配置 module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { static: './dist', }, });
webpack.prod.js 生產(chǎn)環(huán)境配置
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', });
- 現(xiàn)在,在 webpack.common.js 中,我們?cè)O(shè)置了 entry 和 output 配置,并且在其中引入這兩個(gè)環(huán)境公用的全部插件。
- 在 webpack.dev.js 中,我們將 mode 設(shè)置為 development,并且為此環(huán)境添加了推薦的 devtool(強(qiáng)大的 source map)和 devServer 配置。
- 最后,在 webpack.prod.js 中,我們將 mode 設(shè)置為 production,
注意,在環(huán)境特定的配置中使用 merge() 功能,可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各種 merge(合并) 高級(jí)功能,但是在我們的用例中,無(wú)需用到這些功能。
到此這篇關(guān)于webpack-merge的使用的文章就介紹到這了,更多相關(guān)webpack-merge的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用structuredClone實(shí)現(xiàn)深拷貝
在JavaScript中,實(shí)現(xiàn)深拷貝的方式有很多種,每種方式都有其優(yōu)點(diǎn)和缺點(diǎn),今天介紹一種原生JavaScript提供的structuredClone實(shí)現(xiàn)深拷貝,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能
這篇文章主要介紹了微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06TypeScript 獲取函數(shù)的參數(shù)類(lèi)型、返回值類(lèi)型及定義返回函數(shù)類(lèi)型
這篇文章主要介紹了TypeScript 獲取函數(shù)的參數(shù)類(lèi)型、返回值類(lèi)型及定義返回函數(shù)類(lèi)型,需要的朋友可以參考下2024-02-02JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來(lái)非常簡(jiǎn)單,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07詳談js對(duì)url進(jìn)行編碼和解碼(三種方式的區(qū)別)
下面小編就為大家?guī)?lái)一篇詳談js對(duì)url進(jìn)行編碼和解碼(三種方式的區(qū)別)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08