webpack4 url文件处理

試著忘記壹切 提交于 2019-12-02 17:03:42

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]'
            }

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!