Webpack——打包图片资源

打包图片资源

webpack.config.js

/**
 * webpack.config.js webpack的配置文件
 *  用来指示webpack干哪些活。（当我们运行webpack指令时，会加载该配置文件）
 *  所有的构建工具都是基于nodejs平台运行，模块化默认基于CommonJs
 * 
 * 1.loader的使用顺序
 *  下载——》使用（配置loader）
 * 2.plugins的使用顺序
 *  下载——》引入——》使用（配置plugins）
 */

// resolve用来拼接绝对路径
const { resolve } = require('path');

// html-webpack-plugin的引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 模式：development|production：开发|生产模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',

    // 输出文件
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        path: resolve(__dirname, 'build'),
    },

    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            // 不同资源使用不同的loader
            // css-loader：用来处理css文件；
            // 下载：cnpm i css-loader style-loader -D
            {
                // 表示匹配哪些文件，这里表示匹配以.css结尾的文件
                test: /\.css$/,
                // 表示使用哪些loader进行处理，使用多个loader，用use
                use: [
                    // 这里用到了这两个loader，所以需要下载 cnpm i css-loader style-loader -D
                    // use中的执行顺序，从右到左，从下到上
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成CommonJs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                ]
            },
            // less-loader：用来处理less文件
            // 下载：cnpm i css-loader style-loader less less-loader -D
            {
                test: /\.less$/,
                // 使用多个loader，用use
                use: [
                    // 这里用到了这三个loader，所以需要下载 cnpm i css-loader style-loader less less-loader -D
                    // use中的执行顺序，从右到左，从下到上
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成CommonJs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                    // 将less文件转化为css
                    'less-loader',
                ]
            },
            // webpack5中图片资源解析loader
            {
                test: /\.(jpg|png|gif)$/,
                type:"asset",
                //解析
                parser: {
                    //转base64的条件
                    dataUrlCondition: {
                        maxSize: 8 * 1024, // 8kb
                    }
                },
                generator:{ 
                    //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                    filename:'img/[name].[hash:6][ext]',
                    //打包后对资源的引入，文件命名已经有/img了
                    publicPath:'./'
                },
            },
            // url-loader：用来处理图片资源
            // 下载：cnpm i url-loader file-loader -D
            // 这个是webpack4的写法
            // {
            //     test: /\.(jpg|png|gif)$/,
            //     // 使用单个loader，可以直接用loader
            //     loader: 'url-loader',
            //     options:{
            //         publicPath:'./img',//相对打包后index.html的图片位置
            //         //输出到build中的目录img下
            //         outputPath:'img/',
            //         //图片大小小于24kb,就会被base64处理，实际上8-12kb的图片比较适合用成base64
            //         // 优点：可以减轻服务器请求数量。
            //         // 缺点：图片体积更大（文件请求变慢）
            //         limit:25*1024,
            //         // 问题：因为url-loader默认使用ES6模块化解析，而html-loader引入图片是CommonJs模块化解析
            //         // 解析时会出问题：[object Module]
            //         // 解决：关闭url-loader的ES6模块化，使用CommonJs
            //         esModule: false,
            //         // 给图片重命名
            //         // [hash:10]：取哈希值的前10位
            //         // [ext]：取文件的原后缀名
            //         name: '[hash:10].[ext]',
            //     }
            // },
            // 上面的loader只能打包css或less中的图片，不能打包html中的图片，所以需要配置html-loader
            // 下载：cnpm i html-loader -D
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
        ],
    },

    // plugins的配置
    plugins: [
        // 详细插件的配置
        // html-webpack-plugin，用来打包html资源
        // 下载：cnpm i html-webpack-plugin -D
        // 使用html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
        // 但是我们需要一个有结构的html：
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'文件，并自动引入打包输出的所有资源
            template: './src/index.html',
        }),
    ],
}

打包后的文件