第五节:Webpack打包其他资源

webpack打包其他资源

前言:

其他资源可以有两种解读:

1. 其他资源指除了html,"css","js"等资源
2. 也可以是通过exclude排除已经配置完的资源,其他一些没有配置的资源

1. webpack打包其他资源流程

1.1 webpack打包其他资源说明

1. 打包除了html,css,js外的其他资源
2. 利用exclude来排除不需要处理的文件
3. 利用file-loader来处理匹配成功后的资源

这里以图标为例:

1.2 下载字体图标

阿里图标官网: https://www.iconfont.cn/

在阿里图标官网下载你想要的字体图标

1.3 配置字体图标的打包

说明:

1. 在webpack.config.js中配置css文件的打包
2. 在webpack.config.js中配置字体图标的打包

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")


module.exports = {
    entry: "./src/main.js",
    output: {
        filename:"bundle.js",
        path:resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                // 打包其他资源
                // exclude 排除, 除了html,css,js文件外所有文件
                // 都是用file-loader来处理, 包括字体图标
                exclude: /\.(html|css|js)$/,
                loader:"file-loader"
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ],
    mode:"development"
}

这样图标文件就会被打包到bundle.js中, 因此在html文件中直接使用字体图标就可以了