Question

使用html-loader时，index.html中的<img>标记未触发url-loader。这是我的webpack配置＆amp; 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>

错误日志：

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文件中有一个<img>标记，其中包含源back.png，因此它会查找同一目录，因此会尝试查找{{1}但是从你的webpack配置来看，图像的路径是Travel/Resource/assets/html/back.png。这意味着您必须将其导入为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看到绝对路径时，它会忽略其余的路径。因此，您添加的路径为path.resolve(__dirname, "/src/image")而不是/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") ],覆盖。

Answer 2

您应该将其添加到扩展名列表中：

library(igraph)
adjm1<-matrix(sample(0:1,1000,replace=TRUE,prob=c(0.9,01)),nc=10) 
g1<-graph.adjacency(adjm1)
x11()
plot(g1)

Answer 3

谢谢大家，但我尝试了上述方法并且没有工作。然后我突然意识到我只需要配置我的快速开发服务器：

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

哈哈时刻：）

webpack html-loader：<img/>标记不触发url-loader

3 个答案: