[英]Build index.html with webpack to use with dev server
我使用 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()
]
}
包.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 中的自定义标签。
问题:
什么是最好的方法,或者每次我在我的索引文件中进行更新时我都需要构建我的项目吗?
谢谢!
至少对于关于自定义 index.html 和热重载的问题。
该插件有一些配置,您可以添加用于模板化。
new HtmlWebPackPlugin({
filename: 'index.html',
template: './public/index.html',
}),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.