首页 > Web开发 > 详细

在webpack中使用 html-withimg-loader 打包html文件中的图片

时间:2020-04-25 00:33:13      阅读:229      评论:0      收藏:0      [点我收藏+]

在安装并配置file-loader插件后,在js文件中引入图片使用import导入图片才能被打包,在css或者sass中的背景图片,需要@import css或sass到js文件中才能被打包

对于html中的img的src引入的图片无法正常打包,这时候需要引入一个webpack的插件 html-withimg-loader

插件地址https://www.npmjs.com/package/html-withimg-loader

安装 npm install html-withimg-loader -S

使用 webpack.config.js

 const HtmlWithimgLoader = require("html-withimg-loader ");

  

module: {
  rules: [
    {
      test: /\.(htm|html)$/,
      loader: ‘html-withimg-loader‘
    },
    // 在file-loader 的options中必须配置esModule: false
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: ‘file-loader‘,
          options: {
            name: ‘[name].[ext]‘,
            outputPath: ‘img/‘,
            publichPath: ‘img/‘,
            esModule: false
          }
        }
      ]
    }
  ]
}

  

 

在webpack中使用 html-withimg-loader 打包html文件中的图片

原文:https://www.cnblogs.com/aidixie/p/12770690.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!