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
}
}
]
}
再次打包后,图片会以文件情势展现出来: