前端篇-webpack三{其他资源打包} --1

轻动琴弦

已于 2022-04-18 20:40:12 修改

阅读量122

点赞数

分类专栏： webpack js 编程基础文章标签： javascript js webpack

于 2022-04-18 20:34:54 首次发布

本文链接：https://blog.csdn.net/hacker12356/article/details/124258634

版权

编程基础同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

27 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Webpack 3将CSS和SVG图标文件打包，包括HTML结构的展示、CSS样式控制及webpack配置。重点讲解了如何利用file-loader处理除HTML、JS和CSS之外的其他资源。

摘要由CSDN通过智能技术生成

效果

请添加图片描述

结构

在这里插入图片描述

各代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack-icon</title>
    <style>
        .iconfonts {
            font-size: 78px;
            width: 200px;
            height: 200px;
            display: inline-block;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .icon {
            display: none;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .iconfonts:hover {
            font-size: 176px;
        }

        .iconfonts:hover .icon {
            display: block;
        }
        .iconfonts:hover .iconfont {
            display: none;
        }
    </style>
</head>

<body>
    <div class="iconfonts">
        <span class="iconfont icon-feiji">
        </span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-feiji"></use>
        </svg>
    </div>
    <div class="iconfonts">
        <span class="iconfont icon-xingsu">
        </span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingsu"></use>
        </svg>
    </div>
    <div class="iconfonts">
        <span class="iconfont icon-zhinanzhen">
        </span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhinanzhen"></use>
        </svg>
    </div>
    <div class="iconfonts">
        <span class="iconfont icon-yintian">
        </span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yintian"></use>
        </svg>
    </div>
</body>

</html>

import "./iconfont.css"
import './iconfont'

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: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
            //打包其他插件(除了html js  css资源以外的资源)
            , {
                //排除html js  css
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader'
  				options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: "development"
}

总结

其他文件使用’file-loader’打包
使用语句 exclude: /.(css|js|html) $KaTeX parse error: Can't use function '\.' in math mode at position 24: …置了的文件（ test: /\̲.̲css$ /,我这里css就设置了，就排除掉）