資訊專欄INFORMATION COLUMN
摘要：分開(kāi)配置的原因前端項(xiàng)目的開(kāi)發(fā)在開(kāi)發(fā)過(guò)程中和上線時(shí)需要的依賴是不同的，所以要求使用打包的時(shí)候要能夠在兩種情況下執(zhí)行不同的配置。在中的屬性中配置開(kāi)發(fā)打包命令和上線打包命令，指定不同的配置文件。
分開(kāi)配置的原因
前端項(xiàng)目的開(kāi)發(fā)在開(kāi)發(fā)過(guò)程中和上線時(shí)需要的依賴是不同的，所以要求使用webpack打包的時(shí)候要能夠在兩種情況下執(zhí)行不同的配置。帶來(lái)的好處是上線的項(xiàng)目不依賴開(kāi)發(fā)下的包，減少生產(chǎn)環(huán)境中所需要請(qǐng)求的依賴從而提升頁(yè)面的性能。
常見(jiàn)的做法 使用不同的配置文件在項(xiàng)目的中創(chuàng)建兩個(gè)配置文件，分別對(duì)應(yīng)的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境。因?yàn)閮蓚€(gè)配置文件有很多共通的基礎(chǔ)配置，可以通過(guò)引入公共配置的方法減少重復(fù)的配置代碼。例如，創(chuàng)建名為webpack.base.config.js的文件，該文件中寫(xiě)入共通的基礎(chǔ)配置代碼。分別創(chuàng)建名為webpack.dev.config.js和webpack.prod.config.js，分別對(duì)應(yīng)開(kāi)發(fā)時(shí)和上線時(shí)的配置文件。在這兩個(gè)文件頭部引入webpack.base.config.js，根據(jù)需求在基本配置的基礎(chǔ)上添加各自個(gè)性化的配置需求。
在package.json中的scripts屬性中配置開(kāi)發(fā)打包命令和上線打包命令，指定不同的配置文件。例如{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。這樣就可以實(shí)現(xiàn)了不同的配置文件對(duì)開(kāi)發(fā)和生產(chǎn)兩種環(huán)境下個(gè)性化打包需求。
完成這些工作之后就可以在命令行中通過(guò)npm run build和npm run dev來(lái)執(zhí)行package中配置的腳本了。
使用環(huán)境變量參數(shù)當(dāng)開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境依賴的包差別不太大的時(shí)候，為了簡(jiǎn)單還可以將所有的配置寫(xiě)在一個(gè)配置文件之中，通過(guò)讀取參數(shù)的方式輸出不同的配置對(duì)象。
方法是首先配置基本的配置項(xiàng)，然后判斷當(dāng)前是否處于開(kāi)發(fā)狀態(tài)下，如果是開(kāi)發(fā)狀態(tài)往配置項(xiàng)里面添加配置。例如配置對(duì)象是config，如果當(dāng)前是開(kāi)發(fā)狀態(tài)，需要添加plugin。則config.plugin.push(new webpackHtmlPlugin())。
判斷的方式是在package.json中腳本加上環(huán)境變量NODE_ENV，例如
{"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","dev":"NODE_ENV=deveploment webpack --config webpack.config.js"}}
const isDev = process.env.NODE_ENV === "development"
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99522.html
摘要：本質(zhì)就是一個(gè)編譯器，通過(guò)將源代碼解析成抽象語(yǔ)法樹(shù)將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開(kāi)發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門(mén)阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...
摘要：的選項(xiàng)中，是文件的輸出路徑是暴露的對(duì)象名，要跟保持一致是解析包路徑的上下文，這個(gè)要跟下面要配置的保持一致。最后修改一下模板，增加引用文件給入口文件再加點(diǎn)依賴模塊，方便打包觀察運(yùn)行打包可以看到，入口文件里依賴的，模塊，直接引用了。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境...
摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開(kāi)頭，以開(kāi)頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過(guò)不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開(kāi)發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開(kāi)發(fā)SPA過(guò)程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來(lái)好像...
摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開(kāi)頭，以開(kāi)頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過(guò)不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開(kāi)發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開(kāi)發(fā)SPA過(guò)程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來(lái)好像...
摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會(huì)結(jié)合的，介紹本地測(cè)試服務(wù)器的搭建過(guò)程。三開(kāi)發(fā)環(huán)境有一些特性是專門(mén)用于開(kāi)發(fā)環(huán)境的，可以幫助我們搭建一個(gè)更好的開(kāi)發(fā)環(huán)境。我們可以通過(guò)配合使用來(lái)搭建本地服務(wù)。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...
閱讀 1830·2021-10-09 09:44
閱讀 2703·2021-09-22 15:38
閱讀 2500·2021-09-09 09:33
閱讀 703·2021-09-07 09:58
閱讀 1830·2021-09-02 15:41
閱讀 2515·2019-08-30 15:55
閱讀 1804·2019-08-30 15:55
閱讀 549·2019-08-30 15:44
