使用 html-withimg-loader 处理 HTML 中的图片

最新推荐文章于 2024-03-29 09:50:21 发布

小白小白从不日白

最新推荐文章于 2024-03-29 09:50:21 发布

阅读量740

点赞数

分类专栏：工程化文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118443859

版权

工程化专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前提：切换到项目的根目录下

1.通过 npm install 初始化项目，安装项目所需的相关的包

2.通过 npm run webpack 打包项目，在此之前为了防止因图片路径导致一些不必要的问题，我们可以在 webpack.config.js 文件里module里进行如下设置：

3.通过 npm install --save-dev html-withimg-loader@0.1.16 安装处理HTML文件中图片的包，安装好后在 webpack.config.js里的module里进行如下配置：

4.通过 npm run webpack 打包项目

最后结果如下：

源码：

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>使用 html-withimg-loader 处理 HTML 中的图片</title>
</head>

<body>
    <img src="./src/img/logo.png" alt="" />
    <script></script>
</body>

</html>

index.css：

body {
    background-color: yellow;
    /* background-image: url(); */
}

index.js：

import './index.css';

console.log('index');

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]',
            esModule: false
          }
        }
      },
      {
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

package.json：

{
    "name": "webpack-html-img",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "webpack": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "css-loader": "^4.1.1",
        "file-loader": "^6.0.0",
        "html-webpack-plugin": "^4.3.0",
        "html-withimg-loader": "^0.1.16",
        "mini-css-extract-plugin": "^0.9.0",
        "style-loader": "^1.2.1",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12"
    }
}