使用的WebPack HtmlWebpackPlugin

我非常新的WebPack和東西，我需要一個解決方案來分離基本href的index.html和 Src在bundle.js，用於開發和生產爲兩者是不同的。使用的WebPack HtmlWebpackPlugin

對於發展

基本href =本地主機

SRC = /bundle.js

對於生產

基本href =服務器ù RL

SRC = /dist/bundle.js

爲了解決我試圖使用HtmlWebpackPlugin上述問題，以下是webpack.config.js設置

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname + "/dist", 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
    { 
    exclude: /node_modules/, 
    use:[ 
     { 
     loader: 'babel-loader', 
     options:{ 
      presets: ['react', 'es2015', 'stage-1'] 
     } 
     }, 
    ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }), 
     new HtmlWebpackPlugin({ 
      template:'index.html', 
      inject:'head', 
      hash: true, 
      baseHref: 'http://localhost:8030/' 
     }) 
    ] 
};

以下是我試圖使用baseHref到index.html

<html> 
    <head> 
    <% if (htmlWebpackPlugin.options.baseHref) { %> 
     <base href="<%= htmlWebpackPlugin.options.baseHref %>"> 
    <% } %> 

    /* 
     Several css are defined with relative path here 
    */ 
    </head> 
    <body> 
    <div class="container-fluid"></div> 
    </body> 
    <script src="/bundle.js"></script> 
</html>

我通過上面的設置

我需要幫助就知道收到以下錯誤什麼，我做錯了什麼？

任何幫助將不勝感激。

謝謝。

來源

2017-09-09 iphonic

是否安裝了'html-loader'？ –

nope它沒有安裝，它有任何區別@Prakashsharma？ – iphonic

我會說使用'ejs'模板。你不需要任何裝載機。 https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md –

https://github.com/jantimon/html-webpack-plugin/issues/212

在Github上這個問題建議你改名「的index.html」文件「index.ejs」。

這似乎是因爲webpack試圖將Babel轉譯器應用到您的html文件，並且失敗，「.ejs」擴展名將阻止它。

來源

2017-09-09 19:17:04

我修正了這個問題，問題是'test：/ \。js $ /'，''babel-loader'對html有效，但現在我改成了ejs。感謝幫助。 – iphonic

我打算建議，但你的配置沒有babel-loader！ –

是的，我沒有在我的問題中添加，我會更新.. – iphonic

使用的WebPack HtmlWebpackPlugin

回答

相關問題