webpack4.x 图片处理补充之压缩

Dear 丶 2022-05-26 22:22 234阅读 0赞

1.下载安装

cnpm i image-webpack-loader -D

2.配置

module:{ 
     //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
     rules:[
     {
     // test 表示测试什么文件类型
     test:/\.css$/,
     // 使用 'style-loader','css-loader'
     use:ExtractTextPlugin.extract({
     fallback:'style-loader', // 回滚
     use:[
     {loader:'css-loader'},
     {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
     ],
     publicPath:'../' //解决css背景图的路径问题
     })
     },
     {
     test:/\.less$/,
     use:ExtractTextPlugin.extract({ //分离less编译后的css文件
     fallback:'style-loader',
     use:['css-loader','less-loader']
     })
     },
     {
     test:/\.(sass|scss)$/,
     use:['style-loader','css-loader','sass-loader']
     },
             {
                 test:/\.(js|jsx)$/,
                 use:['babel-loader'],
                 exclude:/node_modules/
             },
             {             test:/\.(png|jpg|gif|svg)$/,             use:[{                 loader:'url-loader',                 options:{ // 这里的options选项参数可以定义多大的图片转换为base64                     name: '[name].[ext]',                     limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径                     outputPath:'images' //定义输出的图片文件夹                 }             },             { //压缩图片要在file-loader之后使用             loader:'image-webpack-loader',                     options:{                         bypassOnDebug: true                     }             }             ]         }
     ]
     },

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack压缩大图片之项目资源优化

> `webpack`打包时，会根据`webpack.config.js` 中`url-loader`中设置的limit大小来对图片进行处理，小于limit的图片转化成`bas

傷城~/ 2022年12月21日 12:56/ 0 赞/ 185 阅读

相关 webpack3.x升级到webpack4.x

虽然说webpack5都已经出了，但是，可能有一部分人还在用webpack3，因此这篇文章主要是基于vue-cli中到项目配置，从webpack3升级到4.x。由于webp

妖狐艹你老母/ 2022年12月21日 06:08/ 0 赞/ 538 阅读

相关 webpack 处理图片

本文接续上一篇文章来写，请查看： [http://blog.csdn.net/hsl0530hsl/article/details/78490034][http_blog.

╰半橙微兮°/ 2022年06月05日 02:13/ 0 赞/ 225 阅读

相关 webpack4.x 第二节

webpack4.x 打包初体验在根目录下建一个src(源码)目录在建一个dist(打包后)目录在src下建一个入口文件,index.js // in

蔚落/ 2022年05月28日 12:11/ 0 赞/ 265 阅读

相关 webpack4.x 图片处理补充之压缩

1.下载安装 cnpm i image-webpack-loader -D 2.配置 module:{ //配置一个rules(规则),rul

Dear 丶/ 2022年05月26日 22:22/ 0 赞/ 235 阅读

相关 webpack4.X入门配置

webpack构成 1入口: entry 2出口 output 3loaders 转换器 4plugins 插件 5devServer 开发服务器 6m

梦里梦外;/ 2022年05月18日 04:27/ 0 赞/ 304 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 383 阅读

相关 webpack4.x实战六，处理图片

如何处理图片处理图片安装插件file-loader 执行`npm install --save-dev file-loader` 修改src/css/st

曾经终败给现在/ 2022年01月10日 07:34/ 0 赞/ 224 阅读

相关解锁webpack-----4.x

\\ 在网页中会引用哪些常见的静态资源？ \+ JS - .js .jsx .coffee .ts（TypeScript 类 C\ 语言） \+ CSS

女爷i/ 2021年09月19日 10:54/ 0 赞/ 407 阅读

相关 webpack4 打包图片

1、下载 cnpm install url-loader file-loader html-loader@0.5.5 -D 其中url-loader

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:24/ 0 赞/ 539 阅读