前端基础之《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 -D

3、修改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，用的时候需要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

// 两个环境都需要的公共配置

// 从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目录下