webpack 之 打包图片文件
请先查看 webpack 之 打包css文件(正确是查看 webpack 之 打包less文件)
一.创建文件夹,存放文件
1/images
2/存放pre.jpg图片(注:图片大小为3kb以下,原因后面会提到)
二.文件查看
修改了normal.css的样式内容
body { /* background-color: red; */ background: url("../images/pre.jpg"); }
三.配置webpack.config.js
let path = require("path"); module.exports = { entry: "./src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.(png|jpg|gif|jpeg)$/, //配置了相关信息 use: [ { loader: "url-loader", options: { limit: 20000,/这个限制并不是说超过了就不能打包,而是当图片大小小于限制时会自动转成base64码引用 }, }, ], }, ], }, };
四.执行命令
npm i --save-dev url-loader
npm run build // 报错 Cannot find module 'file-loader'
报错分析:
原因:是因为一开始给的图片文件是比较大的,大概有15kb大小,那么通过url-loader无法进行打包,后来换了小于3kb的图片后就可以了
如何解决:
第一种:改变limit的大小,一定要比图片大 //成功
第二种:替换一个小图片 //成功
第三种:可以通过file-loader来解决 //失败,并没有成功 (第二天又成功了,并知道了一些其他的内容)
其实,file-loader是不需要在webpack.config.js中配置的,之所以要安装是因为file-loader可以解决图片大的问题,但是不要设置url-loader的limit
五.通过file-loader来配置(失败的案例:主要原因是打包后,图片的路径始终不正确)
(一) 还需要配置package.json
{ "name": "k03", "version": "1.0.0", "description": "", "main": "main.mjs", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.3.0", "file-loader": "^4.0.0", //这个版本是修改过的 "less": "^3.9.0", "less-loader": "^5.0.0", "style-loader": "^1.0.0", "url-loader": "^4.1.1", "webpack": "^3.6.0" } }
(二)还需配置webpack.config.js
let path = require("path"); module.exports = { entry: "./src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: "url-loader", }, ], }, ], }, };
(3)运行命令
npm run build //生成是成功的,但是图片就是无效