react新建工程初始化修改打包路徑修改打包名稱

NeverSayNever 發(fā)布于2019-08-23 16:05 / 1721人閱讀

摘要：自定義配置項(xiàng)導(dǎo)出后重新下載依賴自定義打包路徑行改為相對(duì)路徑行改為如下自定義路徑最終打包路徑為項(xiàng)目外部下，包名為引入中配置添加下面兩行，同上方配置中添加跟上方配置相同，把換成即可添加引用路徑中添加引用時(shí)直接

1.create-react-app 2.自定義配置項(xiàng)

// bash

npm run eject

導(dǎo)出scripts后npm install重新下載依賴

3.自定義打包路徑

// path.js
// 37行pathname改為相對(duì)路徑
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "./");
  return ensureSlash(servedUrl, true);
}

// 73行appBuild改為如下自定義路徑
appBuild: path.resolve(__dirname, "../../dist/panorama"),

最終打包路徑為項(xiàng)目外部dist下，包名為panorama

4.引入less

// bash

npm install less less-loader -D

webpack.config.js中配置

// style files regexes
// 添加下面兩行，同上方sass配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

rules中添加

// 跟上方sass配置相同，把sass換成less即可
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      "less-loader"
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      "less-loader"
  ),
},

5.添加引用路徑

alias中添加

// 引用時(shí)直接@/assets/...
"@": paths.appSrc,

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102679.html

相關(guān)文章

從零到一，新建webpack工程

摘要：指定啟用例如上述代碼，就使用和處理了除了以外的。設(shè)置當(dāng)前的為，同樣這個(gè)配置也可以寫在中。設(shè)置目錄刪除注釋去除空格去除屬性引號(hào)復(fù)制靜態(tài)目錄將所以可能被請(qǐng)求的靜態(tài)文件，分別放在目錄下。結(jié)語(yǔ)本次從零到一，新建了一個(gè)腳手架。 react-sample-javascript 為了實(shí)現(xiàn)一個(gè)可定制化高的react工程，我們往往會(huì)自己搭建一個(gè)react工程。所以本文會(huì)從零開始搭建一個(gè)react腳手架工...

Code4App 2019-08-26 12:08 評(píng)論0 收藏0
傻傻分不清的Manifest

摘要：的英文含義是名單種技術(shù)的確都是把當(dāng)做清單使用緩存清單清單打包資源路徑清單打包清單只不過(guò)是在不同的場(chǎng)景中使用特定的清單來(lái)完成某些功能所以，學(xué)好英文是多么重要，這樣才不會(huì)傻傻分不清到底是干啥的在前端，說(shuō)到manifest，其實(shí)是有歧義的，就我了解的情況來(lái)說(shuō)，manifest可以指代下列含義： html標(biāo)簽的manifest屬性: 離線緩存（目前已被廢棄） PWA: 將Web應(yīng)用程序...

printempw 2019-08-23 17:58 評(píng)論0 收藏0
從零開始搭建一個(gè)React項(xiàng)目

摘要：優(yōu)化代碼拆分從入口文件開始，遞歸地構(gòu)建了整個(gè)應(yīng)用的模塊依賴圖表，然后通常會(huì)將所有的模塊打包成一個(gè)。如果你還不知道什么是React，請(qǐng)點(diǎn)擊這里github源碼安裝Node.js 如果你還不知道什么是ECMAScript，請(qǐng)點(diǎn)擊這里如果你還不知道什么是Node.js，請(qǐng)點(diǎn)擊這里下載Node.js并安裝；接著打開windows命令行窗口分別輸入node -v及npm -v如下圖所示，...

HollisChuang 2019-08-23 12:19 評(píng)論0 收藏0
Webpack個(gè)人學(xué)習(xí)拙見

摘要：通過(guò)各種和的相關(guān)配置，將復(fù)雜的文件和依賴包細(xì)化打包，使得無(wú)論是開發(fā)還是上線發(fā)布都大大節(jié)省了效率。所以我們將移入內(nèi)。寫在最后這是自己第一次寫學(xué)習(xí)筆記，自知內(nèi)容比較基礎(chǔ)還需要深入研究，算是自己對(duì)相關(guān)知識(shí)的梳理吧。 Webpack是什么？ A bundler for javascript and friends. Packs many modules into a few bundled a...

muddyway 2019-08-23 15:36 評(píng)論0 收藏0
Webpack3簡(jiǎn)單入門2

摘要：本工程代碼創(chuàng)建工程添加工程文件通過(guò)配置文件來(lái)使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后輸出文件的文件名是中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄接下來(lái)只要執(zhí)行即可。本工程代碼創(chuàng)建工程 $ yarn init $ yarn add webpack # **添加工程文件：** # public/index.html Web...

Labradors 2019-08-21 18:27 評(píng)論0 收藏0