亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack配置學(xué)習(xí)二-開發(fā)環(huán)境和打包環(huán)境執(zhí)行不同打包

gxyz / 1679人閱讀

摘要：分開配置的原因前端項(xiàng)目的開發(fā)在開發(fā)過程中和上線時(shí)需要的依賴是不同的，所以要求使用打包的時(shí)候要能夠在兩種情況下執(zhí)行不同的配置。在中的屬性中配置開發(fā)打包命令和上線打包命令，指定不同的配置文件。

分開配置的原因

前端項(xiàng)目的開發(fā)在開發(fā)過程中和上線時(shí)需要的依賴是不同的，所以要求使用webpack打包的時(shí)候要能夠在兩種情況下執(zhí)行不同的配置。帶來的好處是上線的項(xiàng)目不依賴開發(fā)下的包，減少生產(chǎn)環(huán)境中所需要請(qǐng)求的依賴從而提升頁(yè)面的性能。

常見的做法 使用不同的配置文件

在項(xiàng)目的中創(chuàng)建兩個(gè)配置文件，分別對(duì)應(yīng)的開發(fā)環(huán)境和生產(chǎn)環(huán)境。因?yàn)閮蓚€(gè)配置文件有很多共通的基礎(chǔ)配置，可以通過引入公共配置的方法減少重復(fù)的配置代碼。例如，創(chuàng)建名為webpack.base.config.js的文件，該文件中寫入共通的基礎(chǔ)配置代碼。分別創(chuàng)建名為webpack.dev.config.js和webpack.prod.config.js，分別對(duì)應(yīng)開發(fā)時(shí)和上線時(shí)的配置文件。在這兩個(gè)文件頭部引入webpack.base.config.js，根據(jù)需求在基本配置的基礎(chǔ)上添加各自個(gè)性化的配置需求。

在package.json中的scripts屬性中配置開發(fā)打包命令和上線打包命令，指定不同的配置文件。例如{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。這樣就可以實(shí)現(xiàn)了不同的配置文件對(duì)開發(fā)和生產(chǎn)兩種環(huán)境下個(gè)性化打包需求。

完成這些工作之后就可以在命令行中通過npm run build和npm run dev來執(zhí)行package中配置的腳本了。

使用環(huán)境變量參數(shù)

當(dāng)開發(fā)環(huán)境和生產(chǎn)環(huán)境依賴的包差別不太大的時(shí)候，為了簡(jiǎn)單還可以將所有的配置寫在一個(gè)配置文件之中，通過讀取參數(shù)的方式輸出不同的配置對(duì)象。
方法是首先配置基本的配置項(xiàng)，然后判斷當(dāng)前是否處于開發(fā)狀態(tài)下，如果是開發(fā)狀態(tài)往配置項(xiàng)里面添加配置。例如配置對(duì)象是config，如果當(dāng)前是開發(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://www.ezyhdfw.cn/yun/99522.html

相關(guān)文章

  • webpack 項(xiàng)目構(gòu)建：（二）ES6 編譯環(huán)境搭建

    摘要：本質(zhì)就是一個(gè)編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...

    marser 評(píng)論0 收藏0

  • React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

    摘要：的選項(xiàng)中，是文件的輸出路徑是暴露的對(duì)象名，要跟保持一致是解析包路徑的上下文，這個(gè)要跟下面要配置的保持一致。最后修改一下模板，增加引用文件給入口文件再加點(diǎn)依賴模塊，方便打包觀察運(yùn)行打包可以看到，入口文件里依賴的，模塊，直接引用了。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境...

    Jason_Geng 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（四）

    摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭，以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來好像...

    frank_fun 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（四）

    摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭，以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來好像...

    lwx12525 評(píng)論0 收藏0

  • webpack 項(xiàng)目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建

    摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會(huì)結(jié)合的，介紹本地測(cè)試服務(wù)器的搭建過程。三開發(fā)環(huán)境有一些特性是專門用于開發(fā)環(huán)境的，可以幫助我們搭建一個(gè)更好的開發(fā)環(huán)境。我們可以通過配合使用來搭建本地服務(wù)。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過程可能會(huì)有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

    tolerious 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<