Question

我正在使用webpack在 webpack.config文件中以以下配置运行我的Three.js应用程序：

module.exports = {
  entry: `${__dirname}/src/tut15.js`,
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },

  plugins: [
    new HtmlWebpackPlugin()
  ]
}

package.json

  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.babel.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

使用 HtmlWebpackPlugin 为我自动生成html。但是因为我想用一些新标签创建一个自定义的html索引文件，所以这对我不起作用。所以我建立了项目

npm run-script build

并使用我应用的编辑在dist文件夹中手动运行index.html，一切正常。

如果我从webpack.config中删除了HtmlWebpackPlugin并再次构建项目，然后运行：

npm start

livereload与我的js文件一起使用，并与我的新index.html和distfolder中的自定义标记一起使用。

问题：

在dist文件夹中创建更改并不正确。如何直接从源代码生成index.html？我想这也许可以解决我所有使用自定义index.html来运行dev服务器的问题。
或者还有可能获得一些Livereload用于构建吗？
建立项目后，它会在我的distfolder中生成index.html和index.bundle。如果我删除index.bundle，则该项目仍然有效。 index.bundle到底是做什么的？

什么是最好的方法？每次我在索引文件中进行更新时，我都需要构建项目吗？

谢谢！

Answer 1

至少对自定义index.html和热重装有疑问。

该插件具有一些可添加以用于模板化的配置。

new HtmlWebPackPlugin({
  filename: 'index.html',
  template: './public/index.html',
}),

使用webpack构建index.html以与开发服务器一起使用

1 个答案: