根據 官方文檔 繼續學習。
根據前文,已完成了 webpack 的初步構建,本章是將css、圖片、字體、數據等資源結合到 wenpack 的一種嘗試,會遇到什麼 bug 呢?讓我們拭目以待吧?
前言
本文需要手動本地添加的文件如下
一、加載CSS
爲了從 JavaScript 模塊中 import 一個 CSS 文件,你需要在 module 配置中 安裝並添加 style-loader 和 css-loader:
cnpm 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: { //配置所有第三方 loader 模塊
+ rules: [ //第三方模塊的匹配規則
+ { test: /\.css$/, use: ['style-loader','css-loader'] }
+ ]
+ }
};
這樣,當我們在本地編寫完 css 樣式,運行該模塊,就會自動將其插入到 html 文件的 中。
使用如下
1.在項目中新添加一個 style.css 文件
src/style.css
.hello {
color: red;
}
2.將該文件導入 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());
}
3.運行構建命令 npm run build
完美
二、加載圖片
使用 file-loader 即可將圖片混合到 CSS 中
cnpm install --save-dev file-loader
同樣是在 webpack.config.js 中配置
...
module: { //配置所有第三方 loader 模塊
rules: [ //第三方模塊的匹配規則
{ test: /\.css$/, use: ['style-loader','css-loader'] },
+ { test: /\.(png|svg|jpg|gif)$/,use: ['file-loader'] }
]
}
...
本地添加一張圖片並導入 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());
運行構建命令 npm run build
木的問題
三、加載字體
使用 file-loader 同樣可以處理字體文件,在 webpack.config.js 中配置
...
module: { //配置所有第三方 loader 模塊
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'] }
]
}
...
在本地添加字體文件,可以直接在自己的電腦字體庫裏面找(一般都是存放在 C:\Windows\Fonts 該目錄下),這裏推薦一個字體轉換網站 convert ttf to woff
將字體文件導入 style.css
+ @font-face {
+ font-family: 'MyFont';
+ src: url('./comic.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ }
.hello {
color: red;
+ font-family: 'MyFont';
background: url('./icon.png');
}
運行構建命令 npm run build
一切順利
四、加載數據
webpack 直接支持 nodejs 和 json ,直接導入即可正常解析運行,而要導入CSV、TSV 和 XML,則需要使用 csv-loader 和 xml-loader 來處理這三類文件
cnpm install --save-dev csv-loader xml-loader
在 webpack.config.js 中添加配置
...
module: { //配置所有第三方 loader 模塊
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'] }
]
}
...
本地手動添加 data.xml 文件
src/data.xml
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
導入 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 並查看開發者工具中的控制檯,你應該能夠看到你導入的數據被打印在了上面!
結語
以上,就是本次章節的全部內容,作爲 wenpack 最出色的功能之一,除了 JavaScript,還可以通過 loader 引入任何其他類型的文件,包括 css 、圖片、字體、數據等等。
因爲是跟着官方文檔一步步實踐,只要細心,bug 自然就沒有啦,也就是說本次學習過程十分舒心愉悅?