webpack html-loader：<img>標記不觸發url-loader

Question

使用html-loader時，index.html中的<img>標記沒有觸發url-loader。這裏是我的WebPack CONFIGS & 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

感謝球員，但我嘗試了上述方法，並沒有奏效。這時我突然意識到我只需要配置我的快遞開發服務器：

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

哈哈:)時刻

Answer 2

你應該把它添加到擴展名列表：

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

Answer 3

因爲該文件不存在，它沒有得到的url-loader。你的HTML文件在Travel/Resource/assets/html/和HTML文件中，你有一個<img>標籤，其源代碼爲back.png，所以它會顯示在同一個目錄下，因此它試圖找到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覆蓋。