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  //生成是成功的,但是图片就是无效