参考
file-loader
url-loader
webpac3.x成神之路
file-loader & url-loader
-
file-loader
解决CSS等中引入图片的路径问题；(解决通过url,import/require()等引入图片的问题)
file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用的路径，使之指向正确的文件。
-
url-loader
当图片小于设置的limit参数值时，url-loader将图片进行base64编码(当项目中有很多图片，通过url-loader进行base64编码后会减少http请求数量，提高性能)，大于limit参数值，则使用file-loader拷贝图片并输出到编译目录中；
配置
1.创建本地项目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目录下创建package.json文件
npm init -y
- 安装
webpack依赖包
npm i webpack webpack-cli webpack-dev-server --save-dev
模块说明：
webpack
webpack核心webpack-cli
webpack的脚手架（启动器）webpack-dev-server
开发环境下用于实时加载依赖
4.修改package.json文件的scripts属性值,进行打包资源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安装相关的loader
npm install file-loader url-loader --save-dev
6.在webpack.config.js中配置
const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js'
},
devServer: {
baseContent: path.resolve(__dirname, '../dist'),// 静态资源根目录
host: 'localhost',//服务器IP地址，默认是localhsot
port: 5527,//服务监听的端口号
compress: true,// 是否开启服务端压缩（gzip）
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{loader: 'babel-loader'}
]
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader',
// options: {
// singleton: true,// 单独的style
// }
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.scss$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/',// 输出目录
name(file) {// 输出名称
if(process.env.NODE_ENV === 'development') {
return '[path][name].[ext]'
}
return '[hansh].[ext]'
},
limit: 5*1024
}
}
]
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000,
publicPath: '../static/fonts/',
outputPath: 'fonts/'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html',//指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路径
}),
new ProgressBarPlugin({
format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
clear: false
}),
new MiniCssExtractPlugin({
filename: '[name].css',// 分离后的文件名
chunkFilename: '[id].css',//
ignoreOrder: false
})
]
}
7.运行命令
npm run build
8.结果展示
9.运行命令
npm run dev
10.结果展示
- 注意
使用url-loader通常用于处理css中的图片;
处理html中的图片可以使用html-withimg-loader
html-withimg-loader处理html中的图片
1.安装
npm install html-withimg-loader --save
2.在webpack.config.js中进行配置
{
test: /\.(htm?l)/i,
use: {loader: 'html-withimg-loader'}
},
3.执行命令
npm run dev
4.执行命令
npm run dev
5.结果展示
