webpack4 url文件处理

Posted 2020-12-01 不骄不傲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack4 url文件处理相关的知识，希望对你有一定的参考价值。

1.安装依赖

npm i style-loader css-loader url-loader file-loader -D

2.新建index.css

.box{
    width: 100px;
    height: 100px;
    background: url(‘../images/1.jpg‘);
    background-size: cover;
}

3.新建index.html

<html lang="en">

<head>
    <title></title>
</head>

<body>
    <div class="box"></div>
</body>

</html>

4.在main.js中引用index.css

import ‘./css/index.css‘

5.在webpack.config.js中配置

module: {
        rules: [
            //处理.css文件
            {
                test: /.css$/,
                use: [‘style-loader‘, ‘css-loader‘]
            },
            //处理图片路径
            {
                test:/.(jpg|png|gif|jpeg|bmp)$/,
                use:‘url-loader‘
            }
        ]
    }

6.url-loader会把文件自动进行编码，如不需要base64可以设置limit属性配置字节大小小于指定数量在进行base64

{
                test:/.(jpg|png|gif|jpeg|bmp)$/,
                //配置limit属性小于1000字节进行base64
                use:‘url-loader?limit=1000‘
            }

7.ur-loader生成的文件会自动重名，如不需重命名可配置name属性

{
                test:/.(jpg|png|gif|jpeg|bmp)$/,
                //设置文件名称原名
                use:‘url-loader?name=[name].[ext]‘
            }

8.如出现根目录文件名相同覆盖问题可在文件名增加随即前缀

{
                test:/.(jpg|png|gif|jpeg|bmp)$/,
                //设置原名输出并增加8为哈希前缀
                use:‘url-loader?name=[hash:8]-[name].[ext]‘
            }

以上是关于webpack4 url文件处理的主要内容，如果未能解决你的问题，请参考以下文章

webpack4.0---url-loader

Webpack4 自定义 Loader

2019.08.17 Webpack4 bilibi

VSCode自定义代码片段3——url大全