Question

一般情况下，＆＃34; index.html＆＃34;使用webpack加载？

我想移动＆＃34; index.html＆＃34;建立/.

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

在package.json中，＆＃34;开始＆＃34;定义为：

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

但是，我无法从＆＃34; webpack-dev-server.js＆＃34;中找到它的位置。

我找到了关于＆＃34; index.html＆＃34;的两个描述。如下所示：

     .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");

当我尝试移动＆＃34; index.html＆＃34;在build /中，浏览器返回＆＃34;无法获取错误＆＃34;。

＆＃34;的index.html＆＃34;和webpack.config.js现在在同一个文件夹中。

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

Answer 1

一种方法是更新脚本（在package.json中），以便将"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复制到{{1}}。

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复制到./build/index.html并从那里提供文件它还会将所有资产注入<body>标记的底部您可以进一步降低此设置的成本，以满足您的需求，只需refer to the plugin docs。

我怎样才能移动＆＃34; index.html＆＃34;什么时候使用webpack？

2 个答案: