url-loader | 易学教程

webpack4 url文件处理

阅读更多关于 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

vue动态定义图片路径

阅读更多关于 vue动态定义图片路径

当我在html模块或者css中引入图片的时候用相对路径，例： <div> <img src="../../assets/img/policeImg/tt.png"> </div> 　　这时候图片可以正常显示，但是我想把图片路径动态化，所以我会把图片路径绑定在data中。 <div> <img :src="img"> </div> <script> export default { data () { return { img: '../../assets/img/policeImg/tt.png' } } } </script> 我们会发现图片显示不出来。几种情况第一种情况图片放在assets文件夹下面，在html模版中直接引入或者在css中引入，如下： WechatIMG4.jpeg WechatIMG5.jpeg 我们可以看到不管是在html中引入或在css中引入图片都会被解析成base64编码，打包之后dist文件夹中也不会有图片，而是在压缩文件中有base64编码。解释：因为加载一张图片就需要发送一次http请求，会降低页面性能，这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURI。相当于把图片数据翻译成一串字符，再把这些字符打包到文件当中，最终只需要引入这个文件就可以访问这个图片。当然如果图片较大

Webpack 4.X 从入门到精通 - module（四）

阅读更多关于 Webpack 4.X 从入门到精通 - module（四）

概念在 webpack 中任何一个东西都称为模块， js 就不用说了。一个 css 文件，一张图片、一个 less 文件都是一个模块，都能用导入模块的语法（ commonjs 的 require ， ES6 的 import ）导入进来。 webpack 自身只能读懂 js 类型的文件，其它的都不认识。但是 webpack 却能编译打包其它类型的文件，像 ES6 、 JSX 、 less 、 typeScript 等，甚至 css 、 images 也是Ok的，而想要编译打包这些文件就需要借助 loader loader 就像是一个翻译员，浏览器不是不认识这些东西么?那好交给 loader 来办，它能把这些东西都翻译成浏览器认识的语言。 loader 描述了 webpack 如何处理非 js 模块，而这些模块想要打包 loader 必不可少，所以它在 webpack 里显得异常重要。 loader 跟插件一样都是模块，想要用它需要先安装它，使用的时候把它放在 module.rules 参数里， rules 翻译过来的意思就是规则，所以也可以认为 loader 就是一个用来处理不同文件的规则文件目录这节课需要用到图片跟样式，所以我要按传统的目录结构来创建目录，目录如下结构目录处理CSS 所需loader style-loader //把处理完的css放到style标签里

webpack4.x 使用

阅读更多关于 webpack4.x 使用

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用；打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽；转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别优化：优化项目，提高性能安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save