Webpack5实战笔记----12.url-loader处理图片

wuchangjian2021-11-03 09:12:36编程学习

安装url-loader:

npm i url-loader -D

 修改webpack.config.js

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [{
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则,从右往左,从下往上,因为兼容性处理要在css调用之前,所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1,
                        esModule: false
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则,从右往左,从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                //修改file-loader配置的写法
                use: [{
                    loader: 'url-loader',
                    options: {
                        //哈希截取,让图片的名字变短
                        // name: '[name].[hash:6].[ext]',
                        // //在dist下面创建img目录
                        // outputPath: 'img'
                        //一般不用outputPath而是直接在name里面加img/
                        name: 'img/[name].[hash:6].[ext]',
                        limit: 25 * 1024
                    }
                }]
            }
        ]
    }
}

/**
 * 1.url-loader 以base64 的方式添加到文件当中,减少请求次数
 * 2.file-loader 将资源拷贝到指定的目录,分开请求
 * 3.url-loader 内部其实也可以调用file-loader
 * 4.limit 字段:超过数值做拷贝,没有超过只需要调用
 *  
 */

/**
 * 1.url-loader 以base64 的方式添加到文件当中,减少请求次数
 * 2.file-loader 将资源拷贝到指定的目录,分开请求
 * 3.url-loader 内部其实也可以调用file-loader
 * 4.limit 字段:超过数值做拷贝,没有超过只需要调用
 *  
 */

源代码:webpack5的案例演示

相关文章

2021.11.10matlab非线性规划

2021.11.10matlab非线性规划

一、非线性规划 如果目标函数或约束条件中包含非线性函数,就称这种规划问题...

【Weblogic】反序列化远程代码执行漏洞(CVE-2019-2725)

你要搞清楚自己人生的剧本——不是你父母的续集,不是你子女的前传࿰...

Java---方法---递归以及重载

Java中的方法类似于C语言中的函数,其作用就是将一些固定作用的代码片段存为一个整体,当...

C语言 学习笔记 2021年11月18日

复习: 指针数组与数组指针:         指针数组&#x...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。