如何解决使用webpack构建index.html以与开发服务器一起使用
我正在使用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到底是做什么的?
什么是最好的方法?每次我在索引文件中进行更新时,我都需要构建项目吗?
谢谢!
解决方法
至少对自定义index.html和热重装有疑问。
该插件具有一些可添加以用于模板化的配置。
new HtmlWebPackPlugin({
filename: 'index.html',template: './public/index.html',}),
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。