样式中的图⽚引⼊

打包图⽚时，最常⽤两个 loader file-loader 将⽤到的图⽚直接复制到 dist ⽬录下，过滤掉不⽤的图⽚ url-loader 将⼩于指定⼤⼩的图⽚，转成 base64，超过指定⼤⼩的图⽚依然使⽤ file-loader 进⾏复制

安装

npm install file-loader url-loader -D 配置 const path = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’) module.exports = { // 打包模式 mode: ‘development’, // ⼊⼝⽂件 entry: ‘./src/index.js’, // 输出 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘main.bundle.js’, }, // loader 配置 module: { rules: [ { test: /.(png|gif|jpe?g)$/, use: { loader: ‘url-loader’, options: { limit: 2 * 1024, // 2 kb 设置图⽚⼤⼩，⼩于该数值的图⽚会被 转成 base64 name: “images/[name].[ext]” } }, } ] }, // plugin 配置 plugins: [ new HtmlWebpackPlugin({ title: “Webpack Demo”, template: “./src/index.html” }) ] }; 上述配置可以处理样式⽂件中的图⽚引⼊，例如： body { / background-color: #dbf; / background: url(./images/1.jpg) no-repeat; }

HTML 中的图⽚引⼊

安装

npm install html-loader -D

配置

const path = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’) module.exports = { // 打包模式 mode: ‘development’, // ⼊⼝⽂件 entry: ‘./src/index.js’, // 输出 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘main.bundle.js’, }, // loader 配置 module: { rules: [ { test: /.(png|gif|jpe?g)$/, use: { loader: ‘url-loader’, options: { limit: 2 * 1024, // 2 kb name: “images/[name].[ext]”, // url-loader 默认采⽤ ES Module 进⾏解析，⽽ html-loader 引⼊图⽚使⽤的是 CommonJS // 解决：关闭 url-loader 的 ES Module 解析，使⽤ CommonJS 进⾏解析 esModule: false } }, }, { test: /.(htm|html)$/i, // 负责处理 HTML 中的 img 图⽚ loader: ‘html-loader’, options: { // webpack4 中只需要在 url-loader 配置 esModule:false // webpack5 需要 html-loader 也配置 esModule:false esModule: false } } ] }, // plugin 配置 plugins: [ new HtmlWebpackPlugin({ title: “Webpack Demo”, template: “./src/index.html” }) ] };

html-loader 与 html-webpack-plugin 冲突

问题

⼊⼝⻚⾯中默认使⽤的 lodash 模板未被解析⽣效。

虽然 html-loader 可以解决 HTML ⽂件中的图⽚加载问题，但 HTML 中的 ejs 语法失效了 #### 原因 htmlWebpackPlugin 会检查⽬标⽂件是否已经有 loader 处理，如果有其他 loader 处理， htmlWebpackPlugin 不再使⽤ lodash.template 去编译⽬标，直接返回 source。 这⾥，我们已经声明了通过 html-loader 来处理 html ⽂件，因此 ejs 语法失效 部分 htmlWebpackPlugin 的关键代码（位置：html-webpack-plugin/lib/loader.js） const _ = require(‘lodash’); module.exports = function (source) { // Get templating options const options = this.getOptions(); const force = options.force || false; const allLoadersButThisOne = this.loaders.filter((loader) => lo ader.normal !== module.exports); // 如果有其他 loader 进⾏处理，则直接返回 if (allLoadersButThisOne.length > 0 && !force) { return source; } // 否则使⽤ lodash.template 的模板进⾏语法解析 const template = _.template(source, { interpolate: /<%=([\s\S]+?)%>/g, variable: ‘data’, …options });

解决

将模板⽂件统⼀为 ejs 格式

先通过 htmlWebpackPlugin 处理 ejs ⽂件，然后 html-loader 继续做后续处理

1. 修改模板⽂件后缀（src/index.html => src/index.ejs）

2. 修改配置中的模板名称

plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: “./src/index.ej, // 这⼀⾏ title: “Webpack Demo”, }) ]

3. 将模板⽂件中的图⽚引⼊，改成 ejs 语法

打包图⽚ - 图1src=“./images/xph.gif” alt=“”> 打包图⽚ - 图2src=“<%= require(‘./images/xph.gif’) %>” alt=“”>