webpack打包其他资源，即非js、html、css、jpg等资源，打包字体图表库

webpack打包demo，git地址：https://github.com/OnionMister/webpack-demo.git

一、项目结构

二、字体图表库下载地址

图标库只是作为“其他资源”测试用，也可以用别的东西代替这里的“其他资源”，
图标库使用地址：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=19238

三、index.html文件中使用字体图标

	<span class="iconfont icon-auto"></span>  <!-- 把class换成你下载的图标的class -->
    <span class="iconfont icon-data"></span>
    <span class="iconfont icon-rmb"></span>
    <span class="iconfont icon-play-fill"></span>

四、入口index.js文件引入样式

import './iconfont.css';
// 这里没有其他代码，你可写入你自己js代码

五、初始化、loader、plugins（插件）、webpack的安装

根目录运行初始化命令，创建package.json文件

npm init -y

处理css使用css-loader，style-loader，安装命令如下：

cnpm install css-loader style-loader -D

处理其他资源使用file-loader，安装命令如下：

cnpm install file-loader -D

处理html文件使用html-webpack-plugin插件，安装命令：

cnpm install html-webpack-plugin -D

安装webpack和脚手架webpack-cli，命令：

cnpm install webpack webpack-cli -D

webpack.config.js文件的配置

/**
 * loader 安装后，可直接使用
 * plugins（插件） 安装后，先引入后使用
 * 安装loader和plugins：cnpm install html-webpack-plugin css-loader style-loader file-loader -D
 * webpack安装：cnpm install webpack webpack-cli -D
 */
const {
    resolve
} = require('path'); // resolve用于处理绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入处理html的插件
module.exports = {
    // 入口文件
    entry: './src/index.js',
    output: {
        // 输出文件名
        filename: 'bundle.js',
        // 输出路径，__dirname是当前文件的绝对路径，输出到该路径的dist下
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // loader配置，use执行顺序是从下向上，从左向右的
            {
                // 处理样式的loader
                test: /\.css/, // 匹配css文件
                use: [
                    // 将输出到js中的样式字符串提取到style标签并插入到html的head中
                    'style-loader',
                    // 将css以commonjs字符串的形式打包到输出的js文件中
                    'css-loader'
                ]
            },
            {
                // 处理其他资源，采用exclude排除以处理的资源，如：js，html，css等
                exclude: /\.(css|js|html|less|sass|jpg|png|gif|)$/, // 排除
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[hash:10].[ext]', // [hash:10]表示文件名为10为hash，[ext]表示原本的扩展名
                    }
                }]
            }
        ]
    },
    plugins: [
        // 插件配置
        // HtmlWebpackPlugin的作用是创建空body的html文件
        // template配置用于将指定的html文件的body内容复制到创建html文件中
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development', // 开发环境
    mode: 'production', // 生产环境
}

七、运行打包，打包结果

打包命令：

webpack

可运行输出目录下的html文件，看图标是否已经引入。

如果对你有帮助，欢迎点赞👍收藏+关注，谢谢。