webpack html-loader： <img> tag not triggering url-loader

Question

When using html-loader, the <img> tag in the index.html did not trigger url-loader. Here's my webpack configs & html:

webpack config

// webpack config
module.exports = {   
  entry: {
    "index": path.join(__dirname, "./src/js/app.js"),
    "guide_index": path.join(__dirname, './src/js/guide_app.js')
  },
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: '[name].[hash].js'   
  },
  // loaders
  module: {
    rules: [
      {
        test: /\.(gif|jpe?g|png|svg|mp3|ttf)$/i,
        loader: "url-loader",
        include: [
          "/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/image",
          path.resolve(__dirname, "/src/image"),
          path.resolve(__dirname, "/../Travel/Resource/assets/image"),
          path.resolve(__dirname, "/../Travel/Resource/assets")
        ],
        query: {
          limit: 5000,
          name: '[name].[hash:16].[ext]'
          //name: "./assets/[name].[hash:16].[ext]"
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        // exclude: /node_modules/,
        query: { cacheDirectory: true }
      },
      {
        test: /\.html$/,
        use: [ {
          loader: 'html-loader',
          options: {
            minimize: false,
            removeComments: false,
            removeCommentsFromCDATA: false,
            removeCDATASectionsFromCDATA: false,
            collapseWhitespace: false,
            conservativeCollapse: false,
            // removeAttributeQuotes: false,
            // useShortDoctype: false,
            // keepClosingSlash: false,
            minifyJS: false,
            minifyCSS: false,
            // removeScriptTypeAttributes: false,
            // removeStyleTypeAttributes: false
          }
        }]
      }
    ]   
  },
  // Plugins
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'guide_index.html',
      template: path.join(__dirname, './src/html/guide_index.html'),
      inject: true,
      chunks: ["guide_index"],
      minify: false,
      chunksSortMode: 'dependency'
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, './src/html/index.html'),
      inject: true,
      chunks: ["index"],
      minify: false,
      chunksSortMode: 'dependency'
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': "'development'"
    })
  ],
  resolve: {
    extensions: [ '.web.js', '.js', '.jsx' ]
  }
}

index.html:

<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
  <img src="back.png">
</div>

error logs:

Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html':
Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'

  - compiler.js:76
    [Travel]/[.2.28.0@html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:291 Compiler.<anonymous>
    [Travel]/[.2.3.2@webpack]/lib/Compiler.js:291:10

  - Compiler.js:494
    [Travel]/[.2.3.2@webpack]/lib/Compiler.js:494:13

  - Tapable.js:138 next
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:138:11

  - CachePlugin.js:62 Compiler.<anonymous>
    [Travel]/[.2.3.2@webpack]/lib/CachePlugin.js:62:5

  - Tapable.js:142 Compiler.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:142:13

  - Compiler.js:491
    [Travel]/[.2.3.2@webpack]/lib/Compiler.js:491:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46

  - Compilation.js:645 self.applyPluginsAsync.err
    [Travel]/[.2.3.2@webpack]/lib/Compilation.js:645:19

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46

  - Compilation.js:636 self.applyPluginsAsync.err
    [Travel]/[.2.3.2@webpack]/lib/Compilation.js:636:11

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46

  - Compilation.js:631 self.applyPluginsAsync.err
    [Travel]/[.2.3.2@webpack]/lib/Compilation.js:631:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46

  - Compilation.js:627 sealPart2
    [Travel]/[.2.3.2@webpack]/lib/Compilation.js:627:9

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46

 ......

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  7.51 kB       0

ERROR in ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html
Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'
  @ ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html 1:2182-2203 1:2367-2388

Answer 1

Thanks guys, but I tried the above approaches and didn't work. Then I suddenly realized I just need to configure my express dev server：

app.use(express.static(...))

Haha moment 💡 ：）

Answer 2

It doesn't get to the url-loader because the file does not exist. Your HTML file is in Travel/Resource/assets/html/ and in the HTML file you have an <img> tag with the source back.png, so it will look in the same directory, therefore it tries to find Travel/Resource/assets/html/back.png but judging from your webpack configuration, the path to the image is Travel/Resource/assets/image/back.png. That means you have to import it as ../image/back.png:

<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
  <img src="../image/back.png">
</div>

It should find the file and apply the url-loader correctly, but your rule with the url-loader is not quite correct. You're including path.resolve(__dirname, "/src/image") and when path.resolve sees an absolute path it ignores the rest. So the path you include is /src/image not /path/to/project/src/image. You need to remove the leading /, and you can change your include to:

include: [
  path.resolve(__dirname, "src/image"),
  path.resolve(__dirname, "../Travel/Resource/assets/image"),
  path.resolve(__dirname, "../Travel/Resource/assets")
],

With that you don't need the absolute path you added manually, because it's now covered by the second path.resolve.

Answer 3

You should add it to the extension list:

// extensions: [ '.web.js', '.js', '.jsx' ]
extensions: [ '.web.js', '.js', '.jsx', '.png' ]