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

NeverSayNever 發布于2019-08-23 16:05 / 1713人閱讀

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

1.create-react-app 2.自定義配置項

// bash

npm run eject

導出scripts后npm install重新下載依賴

3.自定義打包路徑

// path.js
// 37行pathname改為相對路徑
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"),

最終打包路徑為項目外部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中添加

// 引用時直接@/assets/...
"@": paths.appSrc,

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102679.html

從零到一，新建webpack工程

摘要：指定啟用例如上述代碼，就使用和處理了除了以外的。設置當前的為，同樣這個配置也可以寫在中。設置目錄刪除注釋去除空格去除屬性引號復制靜態目錄將所以可能被請求的靜態文件，分別放在目錄下。結語本次從零到一，新建了一個腳手架。 react-sample-javascript 為了實現一個可定制化高的react工程，我們往往會自己搭建一個react工程。所以本文會從零開始搭建一個react腳手架工...

Code4App 2019-08-26 12:08 評論0 收藏0
傻傻分不清的Manifest

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

printempw 2019-08-23 17:58 評論0 收藏0
從零開始搭建一個React項目

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

HollisChuang 2019-08-23 12:19 評論0 收藏0
Webpack個人學習拙見

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

muddyway 2019-08-23 15:36 評論0 收藏0
Webpack3簡單入門2

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

Labradors 2019-08-21 18:27 評論0 收藏0