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覆盖。