用webpack开发服务器将javascript入口点注入html文件？
Webpack是一个现代的JavaScript应用程序的静态模块打包工具。它可以将多个JavaScript模块打包成一个或多个bundle文件，以及处理其他资源如CSS、图片等。Webpack开发服务器（Webpack Dev Server）是Webpack官方提供的一个开发环境工具，它可以在开发过程中提供一个本地的开发服务器，并且支持热模块替换（Hot Module Replacement）功能，使得开发者可以实时预览和调试应用程序的变化。
要将JavaScript入口点注入HTML文件，可以通过Webpack的HtmlWebpackPlugin插件来实现。HtmlWebpackPlugin是一个Webpack插件，它可以根据配置生成一个或多个HTML文件，并自动将打包后的JavaScript文件注入到HTML文件中。
下面是一个使用Webpack开发服务器和HtmlWebpackPlugin插件将JavaScript入口点注入HTML文件的配置示例：
- 首先，安装Webpack和相关插件：
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev- 在Webpack配置文件中，配置入口点和输出文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// 其他配置项...
};- 在Webpack配置文件中，配置HtmlWebpackPlugin插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 其他配置项...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};- 创建一个HTML模板文件（例如index.html），并将注入点标记为
<script src="bundle.js"></script>：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div id="app"></div>
<!-- 这里是注入点 -->
<script src="bundle.js"></script>
</body>
</html>- 在package.json中，配置启动命令：
{
"scripts": {
"start": "webpack serve --open"
}
}- 运行启动命令，启动Webpack开发服务器：
npm start以上配置将会启动Webpack开发服务器，并自动打开浏览器访问应用程序。Webpack开发服务器会监视文件的变化，并在文件发生变化时自动重新编译和刷新页面，同时将打包后的JavaScript文件注入到HTML文件中。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版（CDB）、腾讯云CDN加速等。你可以在腾讯云官网上找到更多关于这些产品的详细介绍和文档。
参考链接：
- Webpack官方文档：https://webpack.js.org/
- HtmlWebpackPlugin插件官方文档：https://webpack.js.org/plugins/html-webpack-plugin/
- 腾讯云官网：https://cloud.tencent.com/
相关·内容
有没有可能将JS入口点注入到webpack开发服务器中，就像CSS是内联注入一样？<!DOCTYPE html><head> <title>app</title>
浏览 10提问于2016-07-17得票数 3
回答已采纳
我已经用Vue ()实现了查看器。现在的问题是如何用Chrome扩展内容脚本注入Vue页面。我发现和这个有助于使用Vue作为扩展选项页和覆盖页面等等，因为它们的入口点是HTML。但是内容脚本入口点是javascript，要在内容脚本中注入javas
浏览 13提问于2020-01-20得票数 9
回答已采纳
现在，我想向index.html添加一个脚本：...<script src='widgets/widgets.js'></script>
当我运行时，脚本被复制到index.html /www目录，但是在应用程序中，我的脚本标记或任何其他更改都不在那里看来webpack没有用我的新版本。如何让webpack使用修改后的模板？
浏览 1提问于2018-11-29得票数 0
1回答
我已经用React和Webpack做了一段时间的应用程序。我的开发环境工作得很好，所有的东西都使用webpack开发服务器正确加载.对输出的快速检查告诉我，我的任何组件代码都没有进入webpack -p构建。 + 219 hidden modules
当我运行
浏览 6提问于2016-01-21得票数 3
回答已采纳
1回答
为了开发环境，我想从Webpack转向雪堆。但是我在Webpack设置了多个入口点，我还没能找到一个在雪堆中如何做到这一点的例子。看起来，雪花包应该与只有一个HTML页面和一个入口点Javascript文件的真正SPA一起使用。站点上的每个HTML页面(总共20个)都有自己的index.js，这是该页面的起点，并且独立于站点上的其他页面。这在雪堆里如何工作呢？
我发现了一些关于多个
浏览 3提问于2021-05-27得票数 5
问题：
当我启动webpack开发服务器进行本地开发时，它将正确地服务于localhost:8080下的文件，并根据webpack的配置适当地注入动态资产。但是--当我更改源文件中的某些内容时，重新构建就会被触发，所有事情似乎都被正确地触发了，但是--动态资产没有注入index.html。因此，在源代码tsx文件发生任何更改后，localhost:8080的屏幕将为空，因为bundle.js
浏览 1提问于2017-03-28得票数 0
回答已采纳
我想知道服务器在通过GET请求提供普通html文件之后是否可以启动到客户端的连接？
更具体地说，我设置了webpack开发服务器和所有浏览器刷新后，我改变文件工作，但我找不到任何引导在客户端。
浏览 1提问于2016-11-08得票数 2
回答已采纳
我正在开发一个打字稿的网络扩展。为了组织代码，我想把扩展和webpack捆绑在一起。理想情况下，webpack应该编译类型记录并将生成的javascript与html、css、图像一起复制到dist/目录中。我找到了一个，它能满足我的需要。它以manifest.json作为入口点，并创建一个dist/目录。
但模板不使用打字本。这就是我的问题:在manifest.json中，我需要定义将要执行的javascript文件</e
浏览 0提问于2018-09-27得票数 6
回答已采纳
我使用的是webpack-开发-服务器与html-webpack-插件生成的修订源代码的index.html。问题是，每次我更改index.html时，捆绑包系统都不会再次重新构建。
浏览 3提问于2015-10-17得票数 54
JavaScript和SASS更改确实会重新加载浏览器，但是当我通过jade文件进行更改时，浏览器不会重新加载。在终端中，我尝试运行这些webpack-dev-server变体webpack-dev-server --inline --hotwebpack-dev-server --inline --hot --colors --content-
浏览 3提问于2016-06-16得票数 0
1回答
我希望使用javascript模板文字生成html内容，并在Webpack编译时输出静态html文件。我还需要一个具有热模块替换功能的开发服务器，它可以处理html、css和js文件。如下所示：注意，page1.js是而
浏览 0提问于2018-07-29得票数 3
回答已采纳
1回答
响应Laravel部署
、、、、
我在不同的目录中开发了每个目录，但是现在我试图将它们部署在同一个文件夹中，我真的不知道该做什么。或者，我可以在各自的文件夹中部署每个文件夹吗？如果是，如何在同一服务器(apache)上运行它们？
浏览 0提问于2019-01-25得票数 1
回答已采纳
我试图在我的react应用程序上实现服务器端渲染，但遇到了这个错误。
这是我的webpack.config.js文件。当我运行脚本npm start时，一切都能正确编译。
浏览 2提问于2017-06-29得票数 0
4回答
我已经习惯了和Webpack一起使用NPM包，但是我想知道你应该如何使用NPM包而没有 Webpack。我知道怎么安装软件包。我只是不知道如何使用它们，因为您不能只导入普通js中的模块。
浏览 1提问于2018-12-22得票数 5
我需要在我的index.html中内联一些javascript。js实质上是：我用webpack 4和HtmlWebpackPlugin和webpack.ExtendedAPIPlugin。当使用HtmlWebpackInlineSourcePlugin时，它可以插入我的整个js包：或者没有将</
浏览 0提问于2018-12-04得票数 1
回答已采纳
我使用代码拆分将以下文件分隔开，以便能够动态地在自己的构建中更改它(不需要重新编译)：window.process.env.NODE_ENV = 'development'// app/build/env.bundle.jswindow.pr
浏览 5提问于2022-10-11得票数 0
/app/public/packs/MANIFENT.JSON中的manifest.json文件中似乎缺少一个application.css。webpacker.yml value of compile to true for your environmentapp_1 | 2. webpack has not
浏览 0提问于2021-01-23得票数 2
我在我的项目中使用Webpack (v4)、Sass和Vue.js (v2)。在其他一些情况下，我希望将编译的sass代码注入到html标记中。(这是用于我的.vue单文件组件中包含的.vue)
有可能同时拥有这两者吗？我该如何配置Webpack</e
浏览 1提问于2018-09-11得票数 0
回答已采纳
我试图让多个入口点与webpackDevServer一起工作。我在WebpackDevServer中测试了这个设置，所以我怀疑所有的文件至少需要WebpackDevServer才能正常工
浏览 2提问于2018-09-24得票数 1
3回答
我正在读这篇webpack教程：
var path = require('path');
var webpack = require('webpack&
浏览 2提问于2017-05-24得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
