webpack 打包图片资源

野性酷女 2023-01-09 03:54 190阅读 0赞

# webpack 打包图片资源 #

/**
     * loader: 1. 下载 2. 使用（配置）
     * plugins：1. 下载 2. 引入 3.使用
     */
    
    
    // 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    
    module.exports = {
        
        // webpack 配置
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                // 详细 loader 配置
                {
        
                    // 问题：默认处理不了 html 中 img 图片
                    // 处理图片资源
                    test : /\.(jpg | png | gif)$/,
                    // 使用一个 loader， 可以不要use数组，可以直接指定
                    // 除了要下载 url-loader 还要下载 file-loader
                    loader : 'url-loader',
                    options : {
        
                        // 图片大小小于 8kb ， 就会被base64 处理
                        // 优点：减少请求数量（减轻服务器压力）
                        // 缺点：图片体积会更大（文件请求速度更慢）
                        limit : 8 * 1024,
                        // 问题：因为url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                        // 解析是会出现问题：[object Module]
                        // 解决：关闭 url-loader 的es6模块化，使用commonjs解析
                        esModule : false,
                        // 给图片进行重命名
                        // [hash:10]取图片的hash的前10位
                        // [ext] 取文件原来拓展名
                        name : '[hash:10].[ext]'
                    }
                },
                {
        
                    test : /\.html$/,
                    // 处理 html 文件的img图片（负责引入img，从而能被url-loader进行处理）
                    loader : 'html-loader'
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html'
            })
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    }