webpack入門學習手記（三）

siberiawolf0307發表於2018-12-18

本人微信公眾號：前端修煉之路，歡迎關注。

距離上一次更新這個系列，過去了兩天。最近實在是有點忙，沒有擠出時間整理。感覺日更還真是困難?

以下是正文。

管理資源

如果看過之前的系列文章，應該會有一個學習專案webpackStudy，可以從文章下方找到之前的連結。官網給出的示例都是在一個專案中的html頁面、package.json和webpack.config.js中進行修改。我為了保留每一小節的程式碼，並沒有按照官網給出的方案處理，而是重新新建的配置檔案。可以通過騰訊雲開發者平臺檢視原始碼。

webpack有兩大特色：

動態打包。在webpack中，每個模組都會宣告所引用的依賴，這樣就避免了打包沒有使用到的模組。另外通過配置，可以避免重複打包相同的引用，提高打包效率。
強大的loader。通過loader，webpack可以引入任何其他的非JavaScript檔案。例如，載入css、圖片、字型、JSON、XML等。

載入css

首先安裝兩個loader：style-loader、css-loader。執行如下命令：

npm install --save-dev style-loader css-loader
複製程式碼

注意建議使用淘寶 NPM 映象

然後在webpack.config.js中新增使用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']
    }]
  }
};
複製程式碼

新增module.rules表示要使用的loader規則。test屬性使用正規表示式匹配任何的.css檔案。use屬性通過一個陣列，表示匹配到的檔案使用哪些需要載入的loader，這裡就是style-loader和css-loader。

接下來在專案中新增一個style.css檔案，並修改下index.js。

project

|- /src
+   |- style.css
    |- index.js
  |- /node_modules
複製程式碼

src/style.css

.hello {
  color: red;
}
複製程式碼

src/index.js

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

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());
複製程式碼

在index.js檔案中，通過import將style.css檔案引入。在style.css中新增了一個hello樣式。index.js檔案中，直接使用了這個css樣式。

也就是說，在js檔案中，直接使用了css程式碼。感覺非常酷~

然後執行打包命令，看看有什麼變化~

npm run build
複製程式碼

此時用瀏覽器開啟index.html，會發現之前的Hello webpack變成了紅色。請注意，之前我們並沒有在index.html中引入任何的css樣式。用瀏覽器檢查一下頁面，就會知道webpack是怎麼做到的了。

說明webpack將css程式碼自動新增到head標籤中了，非常的智慧化~

載入圖片

接下來嘗試下載入圖片和在css中引用背景圖片。這時我們要使用file-loader。

npm install --save-dev file-loader
複製程式碼

在webpack.config.js中新增一段使用loader的配置。

webpack.config.js

module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    }]
  }
複製程式碼

然後在專案中新增一張圖片。

project

|- /src
+   |- icon.jpg
    |- style.css
    |- index.js
  |- /node_modules
複製程式碼

最後，新增引用圖片和使用背景圖片程式碼。

src/index.js

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

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

  // Lodash, currently included via a script, is required for this line to work
  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);

  return element;
}

document.body.appendChild(component());
複製程式碼

src/style.css

.hello {
  color: red;
  background: url(./icon.jpg);
}
複製程式碼

重新執行打包命令npm run build，然後開啟index.html檔案，會發現已經能顯示新增的圖片和設定的背景圖了。

這裡還有一個小細節是，如果檢視頁面會發現，圖片名稱已經被修改為類似14a53ef4a1ced4a4a6f7161f51c6870e.jpg這樣的名字了。說明webpack處理了新增的圖片，並重新命名了。關於更多的圖片壓縮和優化，以後再繼續整理。

載入字型

載入字型與載入圖片和css沒有什麼區別。我找了一個ttf格式的字型來學習這個過程。首先告訴webpack字型檔案使用file-loader進行載入。

webpack.config.js

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

|- /src
+   |- my-font.ttf
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules
複製程式碼

最後使用字型。

src/style.css

@font-face{
  font-family: 'myFont';
  src: url('./my-font.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
}
.hello {
  color: red;
  font-family: 'myFont';
  background: url(./icon.jpg);
}
複製程式碼

重新打包npm run build，開啟index.html檔案，然後檢視頁面，會發現字型已經使用上了。與圖片相同，字型檔案也被wepack重新命名了。

載入資料

webpack可以載入任何型別的資料，例如JSON, CSV, TSV, 和XML。webpack預設內建了JSON載入資料。

照著官網的例子一步步來。

npm install --save-dev csv-loader xml-loader
複製程式碼

webpack.config.js

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']
    }]
  }
複製程式碼

新增一個測試用的xml資料：

project

|- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules
複製程式碼

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>
複製程式碼

src/index.js

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

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

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

  console.log(Data);

  element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());
複製程式碼

目前執行到這裡一切看起來都很容易。建立一個data.xml檔案，然後加一些假資料，最後在index.js中列印這個資料。但是當我執行打包命令npm run build時，一切都不那麼的和諧了。出現瞭如下的錯誤：

build error


> webpackStudy@1.0.0 build /Users/yyy/Documents/work/workspace/webpackStudy
> webpack --config webpack.config.js

/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.3.1.2@webpack-cli/bin/cli.js:244
                                throw err;
                                ^

Error: Cannot find module '@webassemblyjs/helper-code-frame'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/grammar.js:8:24)
    at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/index.js:11:38)
    at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
複製程式碼

這就很奇怪了，意思是說找不到一個模組。經過一番苦苦查詢，終於知道了原因。

需要將webpack4版本降到webpack3版本。我找到的版本是3.11.0。我將wepack解除安裝掉，然後安裝這個版本之後，再次打包，就成功了。

從上圖的中的列印資料中可以發現，我們的xml檔案已經被解析成了json格式的資料。

說明： 我將本小節程式碼託管到了騰訊雲開發者平臺，如果需要檢視這節內容，請查詢Asset Management目錄即可。

以上就是指南手冊中的Asset Management部分。總結一下主要內容：

載入CSS
載入圖片
載入字型
載入資料

下一篇筆記整理webpack官方文件的指南手冊剩餘部分，敬請關注。

（待續）

相關文章

webpack入門學習手記（一）
2018-12-13
Web
webpack入門學習手記（二）
2018-12-14
Web
webpack入門學習手記（四）
2018-12-30
Web
webpack 學習筆記：入門介紹
2020-09-26
Web筆記
webpack4入門學習筆記(一)
2019-04-21
Web筆記
webpack4入門學習筆記(二)
2019-04-21
Web筆記
gRPC入門學習之旅（三）
2024-03-23
RPC
JavaScript入門學習學習筆記（上）
2020-10-23
JavaScript筆記
git入門學習筆記
2018-11-15
Git筆記
Docker入門學習筆記
2018-07-25
Docker筆記
Unity學習筆記--入門
2023-10-29
Unity筆記
TS入門學習筆記
2020-01-19
筆記
【PostgreSQL】入門學習筆記
2022-04-19
SQL筆記
webpack入門筆記——其他配置
2018-05-11
Web筆記
【java】三大框架學習入門
2018-06-04
Java框架
HTML入門學習筆記（二）
2019-02-16
HTML筆記
React入門指南(學習筆記)
2019-09-05
React筆記
pandas 學習筆記 (入門篇)
2019-10-18
筆記
Go 入門指南學習筆記
2019-12-27
Go筆記
MySQL學習筆記---入門使用
2020-10-24
MySql筆記
Dubbo學習筆記(一) 入門
2018-04-13
筆記
JavaScript入門-學習筆記(一)
2021-01-04
JavaScript筆記
webpack4入門筆記——loader
2018-05-07
Web筆記
webpack入門筆記——熱替換
2018-05-13
Web筆記
Webpack輕鬆入門（三）——圖片打包
2018-06-04
Web
《webpack文件》學習筆記
2018-07-13
Web筆記
Webpack 入門
2019-03-27
Web
入門Webpack
2018-06-12
Web
JavaScript學習筆記1—快速入門
2018-11-02
JavaScript筆記
iOS學習筆記39 ReactiveCocoa入門
2018-06-02
iOS筆記React
redis學習筆記1: Redis入門
2024-05-14
Redis筆記
node 學習筆記基礎入門
2020-10-13
筆記
python學習筆記——jieba庫入門
2020-09-28
Python筆記Jieba
Elasticsearch入門學習重點筆記
2019-05-15
Elasticsearch筆記
Anaconda Pytorch 深度學習入門記錄
2024-10-27
PyTorch深度學習
CANopen學習筆記（一）CANopen入門
2024-08-23
筆記
【Laravel 入門教程】學習筆記 1
2018-04-23
Laravel筆記
【MongoDB學習筆記】MongoDB 快速入門
2021-12-21
MongoDB筆記