本人微信公衆號:前端修煉之路,歡迎關注。
距離上一次更新這個系列,過去了兩天。最近實在是有點忙,沒有擠出時間整理。感覺日更還真是困難😂
以下是正文。
管理資源
如果看過之前的系列文章,應該會有一個學習項目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
> [email protected] 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官方文檔的指南手冊剩餘部分,敬請關注。
(待續)
相關文章