webpackstudy/05/webpack.config.js

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:[
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            },
            {
                //处理图片资源
                test:/\.(jpeg|png|gif|jpg)$/,
                // 需要下载url-loader和file-loader   webpack5已弃用，添加type:'javascript/auto'可解决问题。
                loader: 'url-loader',
                options:{
                    // 图片大小小于8kb 就会被base64处理
                    // 减少请求数量 但图片体积会变大
                    limit: 8 * 1024,
                    esModule: false,   // 解决[object%20Module]问题 原因：url-loader默认使用es6模块化解析，html-loader引入图片commonjs
                    // 取图片的hash前10位 + 扩展名
                    name: '[hash:10].[ext]'
                },
                type: 'javascript/auto'  
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}