前端基础之《React（6）—webpack简介-图片模块处理》
接上篇......
十四、图片模块处理
1、把图片当成一个模块引入
App.jsx增加：
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
cnpm i file-loader -D
cnpm i url-loader -D3、修改config.js
// 两个环境都需要的公共配置// 从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，用的时候需要newplugins: [// 用于把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+的代码编译成ES5exclude: /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
// 两个环境都需要的公共配置// 从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，用的时候需要newplugins: [// 用于把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+的代码编译成ES5exclude: /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目录下