主頁 > 前端設計 > webpack中文網（一）webpack.config.js、npm run build、管理資源（各種loader）、全域資源

webpack中文網（一）webpack.config.js、npm run build、管理資源（各種loader）、全域資源

2021-09-04 07:37:24 前端設計

webpack中文網（一）webpack.config.js、npm run build、管理資源（各種loader）、全域資源

文章目錄

  • webpack中文網（一）webpack.config.js、npm run build、管理資源（各種loader）、全域資源
    • 1. 安裝
      • 前提條件
      • 本地安裝
      • 全域安裝
      • 最新體驗版本
    • 2. 起步
      • 基本安裝
      • 創建一個 bundle 檔案
      • 模塊
      • 使用一個組態檔
      • NPM 腳本(NPM Scripts)
      • 結論
    • 3. 管理資源
      • 安裝
      • 加載 CSS
      • 加載圖片
      • 加載字體
      • 加載資料
      • 全域資源
      • 回退處理

總結：

  • 管理資源

    • 在使用loader加載資源之前，需要安裝對應的loader

      npm install --save-dev style-loader css-loader

1. 安裝

前提條件

在開始之前，請確保安裝了 Node.js 的最新版本，使用 Node.js 最新的長期支持版本(LTS - Long Term Support)，是理想的起步，使用舊版本，你可能遇到各種問題，因為它們可能缺少 webpack 功能以及/或者缺少相關 package 包，

本地安裝

最新的webpack版本是：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GTQtEtmp-1630658170231)(https://img.shields.io/npm/v/webpack.svg?label=webpack&style=flat-square&maxAge=3600)]

要安裝最新版本或特定版本，請運行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你還需要安裝 CLI，

npm install --save-dev webpack-cli

對于大多數專案，我們建議本地安裝，這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級專案，通常，webpack 通過運行一個或多個 npm scripts，會在本地 node_modules 目錄中查找安裝的 webpack：

"scripts": {
    "start": "webpack --config webpack.config.js"
}

當你在本地安裝 webpack 后，你能夠從 node_modules/.bin/webpack 訪問它的 bin 版本，

全域安裝

以下的 NPM 安裝方式，將使 webpack 在全域環境下可用：

npm install --global webpack

不推薦全域安裝 webpack，這會將你專案中的 webpack 鎖定到指定版本，并且在使用不同的 webpack 版本的專案中，可能會導致構建失敗，

最新體驗版本

如果你熱衷于使用最新版本的 webpack，你可以使用以下命令，直接從 webpack 的倉庫中安裝：

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

安裝這些最新體驗版本時要小心！它們可能仍然包含 bug，因此不應該用于生產環境，

2. 起步

webpack 用于編譯 JavaScript 模塊，一旦完成安裝，你就可以通過 webpack 的 CLI 或 API 與其配合互動，如果你還不熟悉 webpack，請閱讀核心概念和打包器對比，了解為什么你要使用 webpack，而不是社區中的其他工具，

基本安裝

首先我們創建一個目錄，初始化 npm，然后 在本地安裝 webpack，接著安裝 webpack-cli（此工具用于在命令列中運行 webpack）：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

貫穿整個指南的是，我們將使用 diff 塊，來顯示我們對目錄、檔案和代碼所做的更改，

現在我們將創建以下目錄結構、檔案和內容：

project

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash（目前通過一個 script 腳本引入）對于執行這一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

我們還需要調整 package.json 檔案，以便確保我們安裝包是私有的(private)，并且移除 main 入口，這可以防止意外發布你的代碼，

如果你想要了解 package.json 內在機制的更多資訊，我們推薦閱讀 npm 檔案，

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

在此示例中，<script> 標簽之間存在隱式依賴關系，index.js 檔案執行之前，還依賴于頁面中引入的 lodash，之所以說是隱式的是因為 index.js 并未顯式宣告需要引入 lodash，只是假定推測已經存在一個全域變數 _，

使用這種方式去管理 JavaScript 專案會有一些問題：

  • 無法立即體現，腳本的執行依賴于外部擴展庫(external library)，
  • 如果依賴不存在，或者引入順序錯誤，應用程式將無法正常運行，
  • 如果依賴被引入但是并沒有使用，瀏覽器將被迫下載無用代碼，

讓我們使用 webpack 來管理這些腳本，

創建一個 bundle 檔案

首先，我們稍微調整下目錄結構，將“源”代碼(/src)從我們的“分發”代碼(/dist)中分離出來，“源”代碼是用于書寫和編輯的代碼，“分發”代碼是構建程序產生的代碼最小化和優化后的“輸出”目錄，最終將在瀏覽器中加載：

project

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在 index.js 中打包 lodash 依賴，我們需要在本地安裝 library：

npm install --save lodash

在安裝一個要打包到生產環境的安裝包時，你應該使用 npm install --save，如果你在安裝一個用于開發環境的安裝包（例如，linter, 測驗庫等），你應該使用 npm install --save-dev，請在 npm 檔案 中查找更多資訊，

現在，在我們的腳本中 import lodash：

src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

現在，由于通過打包來合成腳本，我們必須更新 index.html 檔案，因為現在是通過 import 引入 lodash，所以將 lodash <script> 洗掉，然后修改另一個 <script> 標簽來加載 bundle，而不是原始的 /src 檔案：

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>起步</title>
	//因為現在是通過 import 引入 lodash，所以將 lodash <script> 洗掉
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
   //修改另一個 <script> 標簽來加載 bundle，而不是原始的 /src 檔案
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

在這個設定中，index.js 顯式要求引入的 lodash 必須存在，然后將它系結為 _（沒有全域作用域污染），通過宣告模塊所需的依賴，webpack 能夠利用這些資訊去構建依賴圖，然后使用圖生成一個優化過的，會以正確順序執行的 bundle，

可以這樣說，執行 npx webpack，會將我們的腳本作為入口起點，然后 輸出 為 main.js，Node 8.2+ 版本提供的 npx 命令，可以運行在初始安裝的 webpack 包(package)的 webpack 二進制檔案（./node_modules/.bin/webpack）：

npx webpack

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 3003ms
Built at: 2018-2-26 22:42:11
    Asset      Size  Chunks             Chunk Names
main.js  69.6 KiB       0  [emitted]  main
Entrypoint main = main.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 選項還未設定，將 'mode' 選項設定為 'development' 或 'production'，來啟用環境默認值，)

輸出可能會稍有不同，但是只要構建成功，那么你就可以繼續，并且不要擔心，稍后我們就會解決，

在瀏覽器中打開 index.html，如果一切訪問都正常，你應該能看到以下文本：‘Hello webpack’，

模塊

ES2015 中的 import 和 export 陳述句已經被標準化，雖然大多數瀏覽器還無法支持它們，但是 webpack 卻能夠提供開箱即用般的支持，

事實上，webpack 在幕后會將代碼“轉譯”，以便舊版本瀏覽器可以執行，如果你檢查 dist/bundle.js，你可以看到 webpack 具體如何實作，這是獨創精巧的設計！除了 import 和 export，webpack 還能夠很好地支持多種其他模塊語法，更多資訊請查看模塊 API，

注意，webpack 不會更改代碼中除 import 和 export 陳述句以外的部分，如果你在使用其它 ES2015 特性，請確保你在 webpack 的 loader 系統中使用了一個像是 Babel 或 Bublé 的轉譯器，

使用一個組態檔

在 webpack 4 中，可以無須任何配置使用，然而大多數專案會需要很復雜的設定，這就是為什么 webpack 仍然要支持 組態檔，這比在終端(terminal)中手動輸入大量命令要高效的多，所以讓我們創建一個取代以上使用 CLI 選項方式的組態檔：

project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

現在，讓我們通過新組態檔再次執行構建：

npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 選項還未設定，將 'mode' 選項設定為 'development' 或 'production'，來啟用環境默認值，)

注意，當在 windows 中通過呼叫路徑去呼叫 webpack 時，必須使用反斜線()，例如 node_modules\.bin\webpack --config webpack.config.js，

如果 webpack.config.js 存在，則 webpack 命令將默認選擇使用它，我們在這里使用 --config 選項只是向你表明，可以傳遞任何名稱的組態檔，這對于需要拆分成多個檔案的復雜配置是非常有用，

比起 CLI 這種簡單直接的使用方式，組態檔具有更多的靈活性，我們可以通過配置方式指定 loader 規則(loader rules)、插件(plugins)、決議選項(resolve options)，以及許多其他增強功能，了解更多詳細資訊，請查看配置檔案，

NPM 腳本(NPM Scripts)

考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便，我們可以設定一個快捷方式，在 package.json 添加一個 npm 腳本(npm script)：

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

現在，可以使用 npm run build 命令，來替代我們之前使用的 npx 命令，注意，使用 npm 的 scripts，我們可以像使用 npx 那樣通過模塊名參考本地安裝的 npm 包，這是大多數基于 npm 的專案遵循的標準，因為它允許所有貢獻者使用同一組通用腳本（如果必要，每個 flag 都帶有 --config 標志），

現在運行以下命令，然后看看你的腳本別名是否正常運行：

npm run build

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 323ms
Built at: 2018-2-26 22:50:25
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 選項還未設定，將 'mode' 選項設定為 'development' 或 'production'，來啟用環境默認值，)

通過向 npm run build 命令和你的引數之間添加兩個中橫線，可以將自定義引數傳遞給 webpack，例如：npm run build -- --colors，

結論

現在，你已經實作了一個基本的構建程序，你應該移至下一章節的 Asset Management 指南，以了解如何通過 webpack 來管理資源，例如圖片、字體，此刻你的專案應該和如下類似：

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

如果你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 檔案，

如果你想要了解 webpack 的設計思想，你應該查看 basic concepts 和 configuration 頁面，此外，API 章節可以深入了解 webpack 提供的各種介面，

3. 管理資源

如果你是從開始一直遵循著指南的示例，現在會有一個小專案，顯示 “Hello webpack”，現在我們嘗試整合一些其他資源，比如影像，看看 webpack 如何處理，

在 webpack 出現之前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，并將它們從 /src 檔案夾移動到 /dist 或 /build 目錄中，同樣方式也被用于 JavaScript 模塊，但是，像 webpack 這樣的工具，將**動態打包(dynamically bundle)**所有依賴項（創建所謂的依賴圖(dependency graph)），這是極好的創舉，因為現在每個模塊都可以明確表述它自身的依賴，我們將避免打包未使用的模塊，

webpack 最出色的功能之一就是，除了 JavaScript，還可以通過 loader 引入任何其他型別的檔案，也就是說，以上列出的那些 JavaScript 的優點（例如顯式依賴），同樣可以用來構建網站或 web 應用程式中的所有非 JavaScript 內容，讓我們從 CSS 開始起步，或許你可能已經熟悉了這個設定程序，

安裝

在開始之前，讓我們對專案做一個小的修改：

dist/index.html

  <!doctype html>
  <html>
    <head>
-    <title>Getting Started</title>
+    <title>Asset Management</title>
    </head>
    <body>
      <script src="./bundle.js"></script>
    </body>
  </html>

加載 CSS

為了從 JavaScript 模塊中 import 一個 CSS 檔案，你需要在 module 配置中 安裝并添加 style-loader 和 css-loader：

npm install --save-dev style-loader css-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

webpack 根據正則運算式，來確定應該查找哪些檔案，并將其提供給指定的 loader，在這種情況下，以 .css 結尾的全部檔案，都將被提供給 style-loader 和 css-loader，

這使你可以在依賴于此樣式的檔案中 import './style.css'，現在，當該模塊運行時，含有 CSS 字串的 <style> 標簽，將被插入到 html 檔案的 <head> 中，

我們嘗試一下，通過在專案中添加一個新的 style.css 檔案，并將其匯入到我們的 index.js 中：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- style.css
    |- index.js
  |- /node_modules

src/style.css

.hello {
  color: red;
}

src/index.js

  import _ from 'lodash';
+ import './style.css';

  function component() {
    var element = document.createElement('div');

    // lodash 是由當前 script 腳本 import 匯入進來的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

現在運行構建命令：

npm run build

Hash: 9a3abfc96300ef87880f
Version: webpack 2.6.1
Time: 834ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  560 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./src/style.css 1 kB {0} [built]
   [2] ./~/css-loader!./src/style.css 191 bytes {0} [built]
   [3] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [4] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [5] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [6] (webpack)/buildin/global.js 509 bytes {0} [built]
   [7] (webpack)/buildin/module.js 517 bytes {0} [built]
   [8] ./src/index.js 351 bytes {0} [built]

再次在瀏覽器中打開 index.html，你應該看到 Hello webpack 現在的樣式是紅色，要查看 webpack 做了什么，請檢查頁面（不要查看頁面源代碼，因為它不會顯示結果），并查看頁面的 head 標簽，它應該包含我們在 index.js 中匯入的 style 塊元素，

請注意，在多數情況下，你也可以進行 CSS 分離，以便在生產環境中節省加載時間，最重要的是，現有的 loader 可以支持任何你可以想到的 CSS 處理器風格 - postcss, sass 和 less 等，

加載圖片

假想，現在我們正在下載 CSS，但是我們的背景和圖示這些圖片，要如何處理呢？使用 file-loader，我們可以輕松地將這些內容混合到 CSS 中：

npm install --save-dev file-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

現在，當你 import MyImage from './my-image.png'，該影像將被處理并添加到 output 目錄，并且 MyImage 變數將包含該影像在處理后的最終 url，當使用 css-loader 時，如上所示，你的 CSS 中的 url('./my-image.png') 會使用類似的程序去處理，loader 會識別這是一個本地檔案，并將 './my-image.png' 路徑，替換為輸出目錄中影像的最終路徑，html-loader 以相同的方式處理 <img src="./my-image.png" />，

我們向專案添加一個影像，然后看它是如何作業的，你可以使用任何你喜歡的影像：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/index.js

  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');

    // Lodash，現在由此腳本匯入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // 將影像添加到我們現有的 div，
+   var myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

src/style.css

  .hello {
    color: red;
+   background: url('./icon.png');
  }

讓我們重新構建，并再次打開 index.html 檔案：

npm run build

Hash: 854865050ea3c1c7f237
Version: webpack 2.6.1
Time: 895ms
                               Asset     Size  Chunks                    Chunk Names
5c999da72346a995e7e2718865d019c8.png  11.3 kB          [emitted]
                           bundle.js   561 kB       0  [emitted]  [big]  main
   [0] ./src/icon.png 82 bytes {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./src/style.css 1 kB {0} [built]
   [3] ./~/css-loader!./src/style.css 242 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [6] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [7] (webpack)/buildin/global.js 509 bytes {0} [built]
   [8] (webpack)/buildin/module.js 517 bytes {0} [built]
   [9] ./src/index.js 503 bytes {0} [built]

如果一切順利，和 Hello webpack 文本旁邊的 img 元素一樣，現在看到的圖示是重復的背景圖片，如果你檢查此元素，你將看到實際的檔案名已更改為像 5c999da72346a995e7e2718865d019c8.png 一樣，這意味著 webpack 在 src 檔案夾中找到我們的檔案，并成功處理過它！

合乎邏輯下一步是，壓縮和優化你的影像，查看 image-webpack-loader 和 url-loader，以了解更多關于如果增強加載處理圖片功能，

加載字體

那么，像字體這樣的其他資源如何處理呢？file-loader 和 url-loader 可以接收并加載任何檔案，然后將其輸出到構建目錄，這就是說，我們可以將它們用于任何型別的檔案，包括字體，讓我們更新 webpack.config.js 來處理字體檔案：

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

在專案中添加一些字體檔案：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- my-font.woff
+   |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

通過配置好 loader 并將字體檔案放在合適的地方，你可以通過一個 @font-face 宣告引入，本地的 url(...) 指令會被 webpack 獲取處理，就像它處理圖片資源一樣：

src/style.css

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./my-font.woff2') format('woff2'),
+         url('./my-font.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
+ }

  .hello {
    color: red;
+   font-family: 'MyFont';
    background: url('./icon.png');
  }

現在讓我們重新構建來看看 webpack 是否處理了我們的字體：

npm run build

Hash: b4aef94169088c79ed1c
Version: webpack 2.6.1
Time: 775ms
                                Asset     Size  Chunks                    Chunk Names
 5c999da72346a995e7e2718865d019c8.png  11.3 kB          [emitted]
11aebbbd407bcc3ab1e914ca0238d24d.woff   221 kB          [emitted]
                            bundle.js   561 kB       0  [emitted]  [big]  main
   [0] ./src/icon.png 82 bytes {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./src/style.css 1 kB {0} [built]
   [3] ./~/css-loader!./src/style.css 420 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./src/MyFont.woff 83 bytes {0} [built]
   [6] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [7] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [8] (webpack)/buildin/global.js 509 bytes {0} [built]
   [9] (webpack)/buildin/module.js 517 bytes {0} [built]
  [10] ./src/index.js 503 bytes {0} [built]

重新打開 index.html 看看我們的 Hello webpack 文本顯示是否換上了新的字體，如果一切順利，你應該能看到變化，

加載資料

此外，可以加載的有用資源還有資料，如 JSON 檔案，CSV、TSV 和 XML，類似于 NodeJS，JSON 支持實際上是內置的，也就是說 import Data from './data.json' 默認將正常運行，要匯入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader，讓我們處理這三類檔案：

npm install --save-dev csv-loader xml-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }
      ]
    }
  };

給你的專案添加一些資料檔案：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

現在，你可以 import 這四種型別的資料(JSON, CSV, TSV, XML)中的任何一種，所匯入的 Data 變數將包含可直接使用的已決議 JSON：

src/index.js

  import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';
+ import Data from './data.xml';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    // Add the image to our existing div.
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

+   console.log(Data);

    return element;
  }

  document.body.appendChild(component());

當你打開 index.html 并查看開發者工具中的控制臺，你應該能夠看到你匯入的資料被列印在了上面！

在使用 d3 等工具來實作某些資料可視化時，預加載資料會非常有用，我們可以不用再發送 ajax 請求，然后于運行時決議資料，而是在構建程序中將其提前載入并打包到模塊中，以便瀏覽器加載模塊后，可以立即從模塊中決議資料，

全域資源

上述所有內容中最出色之處是，以這種方式加載資源，你可以以更直觀的方式將模塊和資源組合在一起，無需依賴于含有全部資源的 /assets 目錄，而是將資源與代碼組合在一起，例如，類似這樣的結構會非常有用：

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

這種配置方式會使你的代碼更具備可移植性，因為現有的統一放置的方式會造成所有資源緊密耦合在一起，假如你想在另一個專案中使用 /my-component，只需將其復制或移動到 /components 目錄下，只要你已經安裝了任何擴展依賴(external dependencies)，并且你已經在配置中定義過相同的 loader，那么專案應該能夠良好運行，

但是，假如你無法使用新的開發方式，只能被固定于舊有開發方式，或者你有一些在多個組件（視圖、模板、模塊等）之間共享的資源，你仍然可以將這些資源存盤在公共目錄(base directory)中，甚至配合使用 alias 來使它們更方便 import 匯入，

回退處理

對于接下來的指南，我們無需使用本指南中所有用到的資源，因此我們會進行一些清理作業，以便為下一部分指南中的管理輸出章節做好準備：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
-   |- data.xml
-   |- my-font.woff
-   |- my-font.woff2
-   |- icon.png
-   |- style.css
    |- index.js
  |- /node_modules

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
-   module: {
-     rules: [
-       {
-         test: /\.css$/,
-         use: [
-           'style-loader',
-           'css-loader'
-         ]
-       },
-       {
-         test: /\.(png|svg|jpg|gif)$/,
-         use: [
-           'file-loader'
-         ]
-       },
-       {
-         test: /\.(woff|woff2|eot|ttf|otf)$/,
-         use: [
-           'file-loader'
-         ]
-       },
-       {
-         test: /\.(csv|tsv)$/,
-         use: [
-           'csv-loader'
-         ]
-       },
-       {
-         test: /\.xml$/,
-         use: [
-           'xml-loader'
-         ]
-       }
-     ]
-   }
  };

src/index.js

  import _ from 'lodash';
- import './style.css';
- import Icon from './icon.png';
- import Data from './data.xml';
-
  function component() {
    var element = document.createElement('div');
-
-   // Lodash，現在通過 script 標簽匯入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-   element.classList.add('hello');
-
-   // 將影像添加到我們已有的 div 中，
-   var myIcon = new Image();
-   myIcon.src = Icon;
-
-   element.appendChild(myIcon);
-
-   console.log(Data);

    return element;
  }

  document.body.appendChild(component());

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297308.html

標籤：其他

上一篇：微信小程式入門知識點匯總

下一篇：25歲女前端的成長經歷

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂