使用webpack时如何移动“index.html”？

Question

Generally,when will "index.html" be loaded using webpack? 通常，何时使用webpack加载“index.html”？

I want to move "index.html" to in build/. 我想将“index.html”移到build /中。

I'm in trouble over data flow from npm start using webpack. 我在使用webpack从npm开始的数据流方面遇到了麻烦。

In package.json, "start" is defined as: 在package.json中，“start”定义为：

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

However,I couldn't find where it would jump from "webpack-dev-server.js". 但是，我无法从“webpack-dev-server.js”中找到它的位置。

I found two description about "index.html" in it as below: 我在其中找到了关于“index.html”的两个描述，如下所示：

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

and 和

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

when I try moving "index.html" to in build/, browser returned "Cannot Get error". 当我尝试将“index.html”移动到build /时，浏览器返回“无法获取错误”。

"index.html" and webpack.config.js are in same folder now. “index.html”和webpack.config.js现在在同一个文件夹中。

    ./  index.html  package.json  src/    test/
    ../  build/  node_modules/  public/   style/             
    webpack.config.js

Answer 1

One way is to update the script (in package.json) so it copies index.html to the destination folder: 一种方法是更新脚本（在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 should now also copy src/index.html to build/index.html . npm run build现在也应该将src/index.html复制到build/index.html 。

Answer 2

I'm not a webpack expert, but I faced the same issue, and was able to solve it using a plugin: html-webpack-plugin 我不是webpack专家，但我遇到了同样的问题，并且能够使用插件来解决它： html-webpack-plugin

First install it: npm install html-webpack-plugin --save-dev 首先安装它： npm install html-webpack-plugin --save-dev

Then edit your webpack.config.js : 然后编辑你的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'
        })
    ]
};

This is going to copy your index.template.html to ./build/index.html and serve files from there. 这index.template.html您的index.template.html复制到./build/index.html并从那里提供文件。
It will also inject all assets at the bottom of the <body> tag. 它还会在<body>标记的底部注入所有资源。
You can further costumize this setup to fit your need of course, just refer to the plugin docs . 您可以进一步降低此设置的成本以满足您的需要，只需参考插件文档即可。

使用webpack时如何移动“index.html”？

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-02-28 16:26:01

解决方案2
0 2017-03-01 07:34:22

使用webpack时如何移动“index.html”？

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-02-28 16:26:01

解决方案2 0 2017-03-01 07:34:22

解决方案1
0 已采纳 2017-02-28 16:26:01

解决方案2
0 2017-03-01 07:34:22