1. Loader的使用
之前的博文已經介紹了Loader的概念以及用法,webpack 可以使用 loader 來預處理文件,這允許你打包除 JavaScript 之外的任何靜態資源, 甚至允許你直接在 JavaScript 模塊中 import CSS文件。
在 src 目錄下新建 components 文件夾,新建 modal 組件:
編寫代碼:
<!--modal.ejs-->
<div class="modal-parent">
<div class="modal-header">
<h3 class="modal-title"><%= title %></h3>
</div>
<div class="modal-body">
<%= content %>
</div>
<div class="modal-footer">
<%= footer %>
</div>
</div>
// modal.js
import template from './modal.ejs'
export default function modal () {
return {
name: 'modal',
template: template
}
}
修改 main.js:
import Modal from './components/modal/modal'
const App = function () {
let div = document.createElement('div')
div.setAttribute('id', 'app')
document.body.appendChild(div)
let dom = document.getElementById('app')
let modal = new Modal()
dom.innerHTML = modal.template({
title: '標題',
content: '內容',
footer: '底部'
})
}
const app = new App()
此時執行 npm run build 會報錯 :
webpack 無法解析 .ejs 文件,因此我們需要安裝對應的 loader:
npm i ejs-loader -D
並修改 webpack.config.js 添加 module 屬性:
module: {
rules: [
{
test: /.ejs$/,
use: ['ejs-loader']
}
]
}
再次執行 npm run build 就不會報錯了,打開 dist/index.html :
可以看到我們的 modal 組件已經成功渲染出來了。
2. 處理項目中的CSS文件
在 modal.css 中加入樣式代碼:
.modal-parent{
width: 500px;
height: auto;
border: 1px solid #ddd;
border-radius: 10px;
}
.modal-title{
font-size: 20px;
text-align: center;
padding: 10px;
margin: 0;
}
.modal-body{
border: 1px solid #ddd;
border-left: 0;
border-right: 0;
padding: 10px;
}
.modal-footer{
padding: 10px;
}
安裝 css-loader 和 style-loader:
npm i css-loader style-loader -D
修改webpack.config.js 中的 module.rules ,添加css-loader 和 style-loader:
module: {
rules: [
{
test: /.ejs$/,
use: ['ejs-loader']
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
在 modal.js 中引入 modal.css:
import './modal.css'
再次執行 npm run build ,打開 dist/index.html:
CSS樣式已經通過 style 標籤添加到頁面上了;
3. 處理項目中的圖片
在src目錄下創建 assets/img ,放入兩張圖片
給 modal 添加一個背景圖的樣式:
.modal-body{
border: 1px solid #ddd;
border-left: 0;
border-right: 0;
padding: 10px;
background: url("../../assets/img/bg.jpg");
color: #fff;
height: 500px;
}
由於webpack無法處理圖片資源,所以也要安裝對應的 loader
npm install --save-dev url-loader file-loader
在 webpack.config.js 中添加 loader
rules: [
{
test: /.ejs$/,
use: ['ejs-loader']
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(jpg|jpeg|png|gif|svg)$/,
use: 'url-loader'
}
]
打包代碼之後,在瀏覽器打開 dist/index.html ,可見圖片已經顯示出來了:
仔細查看這張圖片可以發現,它是通過 DataURL 加載出來的:
下面更改 url-loader 的配置,limit表示在文件大小低於指定值時,返回一個DataURL
{
test: /.(jpg|jpeg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].[ext]',
limit: 1024
}
}
]
}
再次打包後,圖片會以文件形式展示出來:
本人才疏學淺,不當之處歡迎批評指正