用于.ejs模板中的图像的Webpack文件/图像加载器

看起来我缺少一个在webpack配置中加载图像的设置，如果图像标记位于我的index.ejs模板中。用于.ejs模板中的图像的Webpack文件/图像加载器

我的项目中我的html文件中的所有图像都会在我的构建过程中正确重命名并加载正常，但.ejs文件中的图像标记被忽略。

即我.ejs如果我有<img src="../../home.png">它仍然是这样，但在正常的HTML文件它改变<img src="12345677.png">

我目前的装载机：

loaders: [ 
      //HTML Files 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      //Transpile ES6 to ES5 
      { 
       test: /\.js$/, 
       include: path.join(__dirname, 'src'), 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: [ 
         ["es2015", {"module": false}] 
        ] 
       } 

      }, 
      //Extract Normal CSS 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer', publicPath: "../"}) 

      }, 
      //Bundle Less into CSS Code 
      { 
       test: /\.less$/, 
       loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer!less?sourceMap', publicPath: "../"}) 
      }, 
      //Images 
      { 
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 
       loader: 'file' 
      } 
     ]

和重要插件：

plugins.push(
      new HtmlWebpackPlugin({ 
       hash: true, 
       filename: 'index.html', 
       template: './src/index.ejs', 
       favicon: './src/favicon.ico', 
       inject : false 
      }), 
      // Write out CSS bundle to its own file: 
      new ExtractTextPlugin({ 
       filename: 'css/[contenthash].styles.css', 
       allChunks: true 
      }), 
     );

来源

2016-11-09 StevieB

哪个'HTMLWebpackPlugin'版本是你在用吗？ [this]（https://github.com/ampedandwired/html-webpack-plugin/blob/master/migration.md#loaders-in-templates）描述了现在如何在2.0中支持模板内的加载器。 –

@RedMercury谢谢你！这让我疯狂！它的工作就像一个魅力 –

我认为ejs没有图像加载器支持

你可以试试这个链接underscore-template loader加载图像文件，通过author在此thread

其他加载器的WebPack建议包括ejs-loader

来源

2016-11-12 06:19:24

唉webpack的快乐哈哈，另一个复杂的加载器库了解。好的，我会试试这个，谢谢你。 – StevieB

用于.ejs模板中的图像的Webpack文件/图像加载器

回答

相关问题