file-loader
file-loader工作步骤:
- 把资源移动到输出目录
- 返回资源最终的url
所以file-loader可以用来加载图片、字体等类型的资源
1 安装file-loader: npm i -D file-loader@2
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack",
"start": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^1.1.3",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.5"
}
}
2 配置:
{
test:/\.png$/,
use:['file-loader']
}
const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename: 'app.js'
},
plugins:[
new HtmpWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.png$/,
use:['file-loader']
}
]
},
devServer:{
open: false,
port: 9000
}
}
3 放入png图片到项目中
4 css文件中引入图片:
body{
background: url("./img.png")
}
5 测试成功:npm start
url-loader
url-loader会把图片以base64编码的方式进行编码,以减少图片的请求次数,同时可以设置图片尺寸限制,是file-loader的加强版。
1 安装:npm i -D url-loader@2
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack",
"start": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^1.1.3",
"url-loader": "^2.3.0",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.5"
}
}
2 设置:小于10kb者进行base64编码
const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename: 'app.js'
},
plugins:[
new HtmpWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader: 'url-loader',
options:{
limit: 10000 //小于10kb者进行base64编码
}
}
]
}
]
},
devServer:{
open: false,
port: 9000
}
}