捕獲.JPG
阿里巴巴矢量圖標庫
- 安裝loader
npm install -D xml-loader css-loader postcss-loader style-loader
- webpack.config.js
css-loader要放在style-loader后面，因為webpack加載loader是從后往前的，否則會報錯
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin}= require('clean-webpack-plugin')
module.exports = {
mode:'development',
devtool:'source-map',
module:{
rules:[
{
test:/\.eot|svg|ttf|woff|woff2/,
use:[
{
loader: 'file-loader' //file-loader處理文件
}
]
},
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
// module:true,//css模塊化 css不會影響全局
}
},
'postcss-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
]
},
entry:{
main:'./src/index.js'
},
output:{
filename:'index.js',
path:path.resolve(__dirname,'./dist')
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(
{
title:'learnWebpack',
filename:'dist.html',
template:'./index.html'
}
)
]
}
index.js
import './index.css'
import './icon.css'
import data from './data.xml'
let p = document.createElement('p')
let span = document.createElement('span')
p.classList.add("color")
p.innerHTML = "123color"
span.className = 'iconfont icon-aixin'
document.body.append(p)
document.body.append(span)
console.log1(data)
index.css
.color{
color: #AAAA;
transform: translate(100px,100px);
}
postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')
]
}
data.xml
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
-
html-webpack-plugin
安裝
npm install --save-dev html-webpack-plugin配置
title:模板標題 filename:輸出文件名字 template：指定模板 inject：true允許把js文件打包后注入到html打包文件里 favicon:html圖標設置 meta：{} 定義html meta 視口等信息 minify:true是否壓縮
clean-webpack-plugin
npm install -D clean-webpack-plugin
- 每一次打包都會清除以前打包的內(nèi)容，而不是手動清除
github地址
