用於.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文件/圖像加載器

回答

相關問題