2023-3-15 webpack

59 阅读1分钟

image.png

image.png

如果我们在index.js中引入的css中有@import 其他css,那么我们需要添加importLoaders,后面的数字表示需要再被前几个loader再处理一次,防止我们引入的@import 其他css没有被前面的loader进行处理

image.png

image.png

image.png

即可在index.js中引入图片资源(import或require())

image.png

image.png

image.png

image.png

如图:打包后的资源名称则为 资源名字+5位hash长度+文件类型, .[ext]是必加的,不然打包出来的资源就没有文件类型

image.png

outputPath设置资源打包后的文件夹下的资源路径, 如图打包到build下的img文件夹

image.png

image.png

一般这种写法更多

image.png

image.png

url-loader打包的资源会转成base64,然后嵌入到bundle.js

image.png

image.png

limit设置如果图片大小小于这么多Byte,则转成base64嵌入到bundle.js,如果图片大小大于这么多Byte,则打包到img文件夹下