webpack學習（二）：配置載入css, 圖片, 字型, 資料(JSON, XML, CSV)等資原始檔
demo地址: https://github.com/Lkkkkkkg/webpack-demo
webpack初步配置參照 https://blog.csdn.net/qq593249106/article/details/84892069
配置載入css檔案
webpack 視所有檔案都為模組, css , 圖片, 字型, 資料等靜態資源都會打包進 js 檔案, 所以會需要用到 loader 檔案, 接下來安裝處理css的loader檔案
npm install style-loader css-loader --save-dev //需要用到style-loader和css-loader, 分別有不同作用 在 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: [ //配置載入器, 用來處理原始檔, 可以把es6, jsx等轉換成js, sass, less等轉換成css 引入 loader 後, 就可以在你的 src/index.js 檔案 impor t你想引入的 css 檔案或者其他靜態資源
在 src 目錄檔案下新建一個 style.css , 此時目錄結構如下:
|- /dist //用於放打包後文件的資料夾
|- bundle. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo02</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
index.js
import _ from 'lodash';
import './style.css'
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的語法
element.classList.add('hello'); //給元素新增一個類名hello
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: green;
}
用NPM指令碼執行webpack進行打包
npm run build
開啟index.html
webpack打包成功, css起了作用, 文字變成了綠色
配置載入圖片
載入圖片需要用到另外一個 loader : file-loader
npm install --save-dev file-loader
在 webpack.config.js 引入loader:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [ //配置載入器, 用來處理原始檔, 可以把es6, jsx等轉換成js, sass, less等轉換成css
{
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" / >
現在再 src 資料夾下新增一張圖片picture.jpg:
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾
|- index.js //入口檔案
|- picture.jpg //圖片
|- style.css //css檔案
|- package.json
|- webpack.config.js //webpack配置檔案
然後在js中把這張圖片加入到html中:
import _ from 'lodash';
import './style.css'
import Picture from './picture.jpg'
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的語法
element.classList.add('hello'); //給元素新增一個類名hello
var Pic = new Image(); //新建一個圖片物件
Pic.src = Picture; //圖片物件的路徑設為引入進來的Picture
element.appendChild(Pic); //把圖片物件插入到上面的div物件裡
return element;
}
document.body.appendChild(component());
同時在css中引用圖片:
.hello {
color: green;
background-image: url('./picture.jpg');
}
重新構建:
npm run build
開啟index.html
可以看到新增的img成功引用到了圖片, 並且css的引用的圖片背景也成功了, 而且dist目錄下多了一個名為eede154574125677a58d2f6e6112e417.jpg圖片, 說明圖片被成功處理了
配置載入字型
前面安裝的file-loader 和 url-loader 可以接收並載入任何檔案, 然後將其輸出到構建目錄, 所以也可以將字型進行載入
在 webpack.config.js 引入loader:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [ //配置載入器, 用來處理原始檔, 可以把es6, jsx等轉換成js, sass, less等轉換成css
{
test: /\.css$/, //配置要處理的檔案格式，一般使用正則表示式匹配
use: ['style-loader', 'css-loader'] //使用的載入器名稱
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
};
在 src 資料夾下放入要引用的字型檔案 font.ttf :
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾
|- font.ttf //字型檔案
|- index.js //入口檔案
|- picture.jpg //圖片
|- style.css //css檔案
|- package.json
|- webpack.config.js //webpack配置檔案
然後再 style.css 中使用自定義字型:
@font-face {
font-family: 'MyFont';
src: url('./font.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
.hello {
color: green;
font-family: MyFont;
font-size: 100px;
background-image: url('./picture.jpg');
}
輸入 npm run build 重新構建, 開啟index.html:
同時dist目錄下多了一個名為 7823980a3d6d6d2b65f735d445c8a4bd.ttf 的檔案, 說明字型檔案也被處理過了, 成功載入了字型
配置載入資原始檔(JSON, XML, CSV)
類似於 NodeJS, JSON 支援實際上是內建的, 也就是說 import Data from ‘./data.json’ 預設將正常執行, 要匯入 CSV、TSV 和 XML, 需要用到 csv-loader 和 xml-loader:
npm install csv-loader xml-loader --save-dev
引入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: [ //配置載入器, 用來處理原始檔, 可以把es6, jsx等轉換成js, sass, less等轉換成css
{
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 資料夾下加入 data.xml 資料檔案:
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾
|- data.xml //資料檔案
|- font.ttf //字型檔案
|- index.js //入口檔案
|- picture.jpg //圖片
|- style.css //css檔案
|- package.json
|- webpack.config.js //webpack配置檔案
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>
修改一下 index.js , 引用一下 data.xml 裡面的資料:
import _ from 'lodash';
import './style.css'
import Picture from './picture.jpg'
import Data from './data.xml';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的語法
element.classList.add('hello'); //給元素新增一個類名hello
var Pic = new Image(); //新建一個圖片物件
Pic.src = Picture; //圖片物件的路徑設為引入進來的Picture
element.appendChild(Pic); //把圖片物件插入到上面的div物件裡
console.log(Data); //輸出資料
return element;
}
document.body.appendChild(component());
輸入npm run build 重新構建, 開啟index.html:
按F12, 在控制檯裡看到輸出了xml檔案的資料, 成功載入xml資料