webpack从入门到会玩（4）- 其他资源_webpack media目录-CSDN博客

本文链接：https://blog.csdn.net/tq26556570/article/details/108312852

文章目录

概述

前端项目中出了html、js、css、图片等资源之外，还会有其他的资源，比如视频、iconfont等。这些资源一般不需要webpack怎么处理，直接输出到指定的目录就可以了。

下面就用iconfont来举个例子吧，新建一个media-demo项目，然后去阿里巴巴的iconfont.cn下载一些图标，放到项目里，图标文件放到media目录，css文件放到styles目路，css文件里面读取图标资源的路径记得改一下，index.js中引用iconfont.css，在index.html中添加图标引用，webpack.config.js作一些基本的配置。

在这里插入图片描述

iconfont.css（具体根据自己下载的css为准，只是读取资源的路径要按照目录结构改好）：

@font-face {font-family: "iconfont";
  src: url('../media/iconfont.eot?t=1598185565749'); /* IE9 */
  src: url('../media/iconfont.eot?t=1598185565749#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../media/iconfont.woff?t=1598185565749') format('woff'),
  url('../media/iconfont.ttf?t=1598185565749') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../media/iconfont.svg?t=1598185565749#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icon-test:before {
  content: "\e633";
}

.icon-icon-test1:before {
  content: "\e63a";
}

.icon-icon-test2:before {
  content: "\e640";
}

.icon-icon-test3:before {
  content: "\e644";
}

index.js：

import '../styles/iconfont.css'

console.log('入口模块被加载')

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <i class="iconfont icon-icon-test"></i>
    <i class="iconfont icon-icon-test1"></i>
    <i class="iconfont icon-icon-test2"></i>
    <i class="iconfont icon-icon-test3"></i>
</body>
</html>

webpack.config.js：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: './js/index.js',
    output: {
        path: resolve(__dirname, 'build'),
        filename: 'build.js'
    },
    module: {
        rules: [
            // 处理css资源
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif|svg)$/,
                loader: 'url-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'styles/build.css'
        })
    ],
    mode: 'development'
}

由于需要处理iconfont.css和svg图片，所以还需要css处理相关的loader和url-loader。
相关依赖记得下载好哦！

安装loader

处理其他起源需要用到file-loader，按道理使用了url-loader就应该会安装好file-loader的，不过这里还是给出安装命令。

npm i file-loader -D

配置loader

在webpack.config.js中配置file-loader。

webpack.config.js：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: './js/index.js',
    output: {
        path: resolve(__dirname, 'build'),
        filename: 'build.js'
    },
    module: {
        rules: [
            // 处理css资源
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif|svg)$/,
                loader: 'url-loader'
            },
            // 处理其他资源
            {
                // 排除参数
                exclude: /\.(html|js|css|less|jpg|png|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media',
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'styles/build.css'
        })
    ],
    mode: 'development'
}