webpack html-loader： <img> 标签未触发 url-loader

Question

使用html-loader时，index.html中的<img>标签没有触发url-loader。这是我的 webpack 配置和 html：

webpack 配置

// 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>

错误日志：

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

它没有到达url-loader，因为该文件不存在。您的 HTML 文件位于 Travel/Resource/assets/html/ 中，并且在 HTML 文件中您有一个带有源 back.png 的 <img> 标签，因此它会在同一目录中查找，因此它会尝试查找 Travel/Resource/assets/html/back.png 但从您的 webpack 配置来看，图像的路径是Travel/Resource/assets/image/back.png。这意味着您必须将其导入为../image/back.png:

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

它应该找到文件并正确应用url-loader，但是您使用url-loader 的规则并不完全正确。您包括path.resolve(__dirname, "/src/image")，当path.resolve 看到绝对路径时，它会忽略其余部分。所以你包含的路径是/src/image 而不是/path/to/project/src/image。您需要删除前导/，您可以将include 更改为：

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

这样您就不需要手动添加的绝对路径，因为它现在已被第二个 path.resolve 覆盖。

Answer 2

你应该把它添加到扩展列表中：

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

Answer 3

谢谢大家，但我尝试了上述方法并没有奏效。然后我突然意识到我只需要配置我的express dev server：

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

哈哈瞬间?：）