webpack基本配置---图片资源打包

在webpack打包图片资源的时，先说下的它的优缺点以及一些小问题

• 优点：减少请求数量(减轻服务器压力)
• 缺点: 图片体积会更大(文件请求熟读更慢)
• 小问题: 我们一般可以利用css中的background-image:url()引入图片，以及在html中直接通过img标签直接将图片引入，而待会会运用到loader将解决这些问题，从中会运用到’url-loader’，‘html-loader’
• url-loader: 是针对于css图片引入的方式，默认使用es6模块化解析
• html-loader:是针对于html使用标签直接引入，默认使用Commonjs解析
• 所以为了使两个解释模式一样，可以采用关闭es6解析的方法即可。在下述配置代码中会说明
• 代码如下：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output: {
        filename:'built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            // loader配置
            {
                test:/.\less$/,
                // 要使用多个Loader处理用use
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 问题:默认处理不了html中img图片
            // 处理图片资源
            {
                test:/\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载url-loader file-loader
                loader:'url-loader',
                options: {
                    // 8 * 1024表示 图片大小小于8KB，就会被base64处理
                    // 优点: 减少请求数量(减轻服务器压力)
                    // 缺点: 图片体积会更大(文件请求熟读更慢)
                    limit:  8 * 1024,
                    // 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
                    // 解析时会出问题:[object Module]
                    // 解决:关闭url-loader的es6模块化，使用commonjs解析
                    esModule:false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [text]取文件原来扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                // 处理Html中img图片（负责引入img，从而能被url-loader进行处理）
                loader:'html-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
        
    ],
    mode:'development'

文件目录，如图：

index.html测试内容：

index.less引入图片内容测试（记住，要将less文件引入到入口文件index.js），如图：

打包后的文件目录，如图：

图片体积小于8kb,被base64处理了：

built.js打包后的图片也是可以看到被base64处理了，并且commonjs解析了：

图片资源基础配置，以及遇到过的一些小问题。在这里已经解释了。后续还会继续webpack相关的知识以及优化