4.0 webpack 打包其它资源（eg：字体）

#虽然作为一个前端已经耕耘此行业有三五个年头，但都是在业务中未曾精进，怀着初心，重识Webpack，砥砺前行💪#

• 打包字体资源主要是ttf、woff等字体文件格式需要打包
• 所以采用file-loader（webpack4）来实现，webpack5里面请使用assets/resource

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: {
        // loader 配置
        rules: [
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                // 处理以Url()形式引入图片信息 
                test: /\.(jpg|png|gif|jpeg)$/,
                use: [
                    {
                        // 需要url-loader和file-loader 两个包
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb就会被base64处理
                            // 优点： 减少请求数量（减轻服务器压力）
                            // 缺点： 没有在限制内的图片还是会通过服务器请求，因为体积过大，造成文件请求速度变慢
                            limit: 8 * 1024,
                            // hash 取文件hash的前10位， ext用文件自己的后缀名
                            name: '[name].[ext]',
                            // 问题： 因为url-loader默认使用es6模块化解析，而html-laoder引入图片是commonjs
                            // 解析时会报错 原本引入的地方会显示成【object Module】
                            // 解决： 关闭url-loader的es6模块化，使用commonjs
                            esModule: false,
                        }
                    }
                ],
                // webpack4 升级到webpack5的配置，防止多打包生成无效引用
                type: 'javascript/auto'
            },
            {
                // 处理img标签引入图片信息
                test: /\.html$/,
                // 处理html文件中的img图片 （负责引入img 从而被url-loader进行处理）
                loader: 'html-loader'
            },
            // 打包其它资源（html,js,css资源以外的资源）
            {
                // 排除css/js/html资源
                exclude: /\.(css|js|html|less|jpg|png|gif|jpeg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:10].[ext]',
                    esModule:false,
                },
                 type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        // plugins 配置
        // 打包html 需要 html-webpack-plugin 包
        new HtmlWebpackPlugin({
            // 定义html 模版入口 自动打包所有的资源（js/css）
            template: './src/index.html',
        }),
    ],
    mode: 'development',
}