接上篇......
十四、图片模块处理
1、把图片当成一个模块引入
App.jsx增加：
javascript
import React from 'react'
import logo from './assets/logo.png'
console.log('---logo', logo)
class App extends React.Component {
render() {
return (
<div>
<h1>Hello React</h1>
<img src={logo} alt="logo" />
</div>
)
}
}
export default App打包报错
2、webpack5.0以前，安装file-loader、url-loader
bash
cnpm i file-loader -D
cnpm i url-loader -D3、修改config.js
javascript
// 两个环境都需要的公共配置
// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack') // webpack自带插件
module.exports = {
entry: {
// 把第三方库打包到vendors.js中，从业务代码中抽离出来，为了以后部署时做CDN优化
vendors: ['react', 'react-dom/client'],
// 可以给入口文件取个名字，给output使用
app: {
// 用import引入main.js作为入口文件
import: path.resolve(__dirname, '../', 'src/main.js'),
dependOn: 'vendors' // 用dependOn指定业务代码app依赖于vendors，先打包vendors，再打包app
}
},
// 出口
output: {
// 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径
path: path.resolve(__dirname, '../', 'dist'),
// 指定打包结果的JS名称规范
// filename: 'bundle.js' // 量词，一捆、一束
filename: 'js/[name].[chunkhash:8].js',
// 每次build打包时，都自动先删除dist中的旧文件
clean: true
},
// 插件
// 所有webpack插件都是class，用的时候需要new
plugins: [
// 用于把JS脚本和index.html自动注入合并
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../', 'public/index.html'),
inject: 'body', // 把JS注入到body结束标签前面
filename: 'index.html', // 指定打包成功后这个模板叫什么名字
title: '测试'
}),
// 添加编译进度条
new ProgressPlugin({
handler(percentage, message, ...args) {
console.log(percentage, message, ...args)
}
}),
// 从node_modules中加载react包，将其放在全局变量React中，这样之后所有的文件模块都可以直接访问
new ProvidePlugin({
React: 'react'
}),
],
// 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件
module: {
// 定义模块编译的规则和方式
rules: [
{
test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾
use: ['babel-loader'], // 使用babel编译器把ES6+的代码编译成ES5
exclude: /node_modules/ // 排除node_modules目录下的第三方包文件
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/i,
use: ['file-loader']
},
]
}
}{
test: /\.(png|jpe?g|gif|webp|svg)$/i,
use: 'file-loader'
}
4、webpack5.0中的写法
图片处理模块，在webpack(V4)使用url-loader/file-loader可以处理
file-loader是转换成一个链接
url-loader是转换成base64编码
在webpack5中，推荐使用asset/resource来处理图片等资源文件，这种写法相当于file-loader的写法
修改config.js
javascript
// 两个环境都需要的公共配置
// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack') // webpack自带插件
module.exports = {
entry: {
// 把第三方库打包到vendors.js中，从业务代码中抽离出来，为了以后部署时做CDN优化
vendors: ['react', 'react-dom/client'],
// 可以给入口文件取个名字，给output使用
app: {
// 用import引入main.js作为入口文件
import: path.resolve(__dirname, '../', 'src/main.js'),
dependOn: 'vendors' // 用dependOn指定业务代码app依赖于vendors，先打包vendors，再打包app
}
},
// 出口
output: {
// 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径
path: path.resolve(__dirname, '../', 'dist'),
// 指定打包结果的JS名称规范
// filename: 'bundle.js' // 量词，一捆、一束
filename: 'js/[name].[chunkhash:8].js',
// 每次build打包时，都自动先删除dist中的旧文件
clean: true
},
// 插件
// 所有webpack插件都是class，用的时候需要new
plugins: [
// 用于把JS脚本和index.html自动注入合并
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../', 'public/index.html'),
inject: 'body', // 把JS注入到body结束标签前面
filename: 'index.html', // 指定打包成功后这个模板叫什么名字
title: '测试'
}),
// 添加编译进度条
new ProgressPlugin({
handler(percentage, message, ...args) {
console.log(percentage, message, ...args)
}
}),
// 从node_modules中加载react包，将其放在全局变量React中，这样之后所有的文件模块都可以直接访问
new ProvidePlugin({
React: 'react'
}),
],
// 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件
module: {
// 定义模块编译的规则和方式
rules: [
{
test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾
use: ['babel-loader'], // 使用babel编译器把ES6+的代码编译成ES5
exclude: /node_modules/ // 排除node_modules目录下的第三方包文件
},
// {
// test: /\.(png|jpe?g|gif|webp|svg)$/i,
// use: ['file-loader']
// }
// 在webpack5中，推荐使用asset/resource来处理图片等资源文件，这种写法相当于file-loader的写法
{
test: /\.(png|jpe?g|gif|webp|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:8][ext]'
}
}
]
}
}打包时图片都放在img目录下