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

Question

通常，何时使用webpack加载“index.html”？

我想将“index.html”移到build /中。

我在使用webpack从npm开始的数据流方面遇到了麻烦。

在package.json中，“start”定义为：

"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”移动到build /时，浏览器返回“无法获取错误”。

“index.html”和webpack.config.js现在在同一个文件夹中。

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

Answer 1

一种方法是更新脚本（在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 。

Answer 2

我不是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您的index.template.html复制到./build/index.html并从那里提供文件。
它还会在<body>标记的底部注入所有资源。
您可以进一步降低此设置的成本以满足您的需要，只需参考插件文档即可。

使用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