使用 webpack 构建 index.html 以与开发服务器一起使用
Build index.html with webpack to use with dev server
我正在使用 webpack 运行在我的 Three.js 应用程序中使用 webpack.config 文件中的以下配置:
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
开发服务器的所有问题
- 或者是否也可以为构建获取一些 livereload?
- 在我构建项目后,它会在我的 dist 文件夹中生成 index.html 和 index.bundle。如果我删除 index.bundle 项目仍然有效。 index.bundle 究竟是做什么的?
最好的方法是什么?或者我是否需要在每次更新索引文件时都构建我的项目?
谢谢!
关于自定义 index.html 和 hot-reloading 的问题至少。
该插件有一些配置,您可以为模板添加。
new HtmlWebPackPlugin({
filename: 'index.html',
template: './public/index.html',
}),
我正在使用 webpack 运行在我的 Three.js 应用程序中使用 webpack.config 文件中的以下配置:
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 开发服务器的所有问题
- 或者是否也可以为构建获取一些 livereload?
- 在我构建项目后,它会在我的 dist 文件夹中生成 index.html 和 index.bundle。如果我删除 index.bundle 项目仍然有效。 index.bundle 究竟是做什么的?
最好的方法是什么?或者我是否需要在每次更新索引文件时都构建我的项目?
谢谢!
关于自定义 index.html 和 hot-reloading 的问题至少。
该插件有一些配置,您可以为模板添加。
new HtmlWebPackPlugin({
filename: 'index.html',
template: './public/index.html',
}),