如何在使用webpack時移動「index.html」？

通常，什麼時候使用webpack加載「index.html」？如何在使用webpack時移動「index.html」？

我想將「index.html」移動到build /中。

我在使用webpack時遇到了npm數據流的麻煩。

在的package.json，「開始」的定義是：

"node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js".

但是，我找不到它會從「的WebPack-DEV-server.js」跳。

我在它下面發現了兩個說明有關「的index.html」：

 .boolean("history-api-fallback").describe("history-api-fallback", "Fallback to /index.html for Single Page Applications.")

和

console.log("404s will fallback to %s", options.historyApiFallback.index || "/index.html");

當我嘗試在建/移動「的index.html」來，瀏覽器返回「無法獲取錯誤」。

「index.html」和webpack.config.js現在在同一個文件夾中。

來源

2017-02-28 user2255716

的方法之一是更新腳本（中的package.json），所以它複製index.html到目標文件夾：

"scripts": { 
    "start": "node node_modules/.bin/webpack-dev-server --content-base src", 
    "build": "node node_modules/.bin/webpack && cp src/index.html build/index.html" 
}

npm run build現在應該也src/index.html複製到build/index.html。

來源

2017-02-28 16:26:01 sn3p

它的工作！我可以通過只使用「--content-base」選項加載「index.html」。由cp構建得也很好，但是不能告訴從build文件夾得到的結果。但是，根本沒關係！謝謝！ – user2255716

我不是一個webpack專家，但我面臨着同樣的問題，並能夠使用插件來解決這個問題：html-webpack-plugin

首先安裝：npm install html-webpack-plugin --save-dev

然後編輯您的webpack.config.js：

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    //Your config here (entry, module, resolve, etc.) 
    devServer: { 
     contentBase: './build' //Or any other path you build into 
    }, 
    plugins: [ 
     //other plugins if any 
     new HtmlWebpackPlugin({ 
      template: './index.template.html', //your template file 
      filename: 'index.html', 
      inject: 'body' 
     }) 
    ] 
};

這是要複製您的index.template.html到./build/index.html並從那裏提供文件。
它還會將所有資產注入<body>標記的底部。
你可以進一步花費這個設置來滿足你的需要，當然，只需refer to the plugin docs。

來源

2017-03-01 07:34:22 andreapier

如何在使用webpack時移動「index.html」？

回答

相關問題