个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我在 React 项目上使用 Webpack，它看起来像 HtmlWebpackPlugin 影响 webpack dev server以一种我不明白的奇怪方式。
似乎可以让我浏览到 index.html无论该文件在代码库中的哪个位置，都无法单独使用开发服务器。
假设我有以下目录结构:
myproj/
|- package.json
|- webpack.config.js
|- src/
|- index.html
|- index.jsx
webpack.config.js看起来像这样的文件:
const path = require('path');
module.exports = {
entry: './src/index.jsx',
devServer: {
contentBase: __dirname
}
};
webpack-dev-server --mode=development .因为我有
devServer.contentBase设置为当前目录(
myproj )和
index.html文件在里面
myproj/src ，我必须浏览到
http://localhost:8080/src/index.html查看我的网络应用程序。如果我尝试浏览
http://localhost:8080/index.html然后我得到一个 404。这对我来说很有意义。
HtmlWebpackPlugin , 里面什么都不改
webpack.config.js :
const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
http://localhost:8080/index.html或
http://localhost:8080/src/index.html .
HtmlWebpackPlugin怎么做才能做到这一点？
最佳答案
好吧，我想我想通了。
TL; 博士
一旦添加 HtmlWebpackPlugin你应该从 index.html 中删除这一行:
<script type="text/javascript" src="main.bundle.js"></script>
http://localhost:8080/index.html .
HtmlWebpackPlugin ，需要您的
index.html文件并在
<script> 中合并指向你的 webpack 包的标签。它提供来自
http://localhost:8080 的合并 html 文件.即使
index.html 也会这样做已经包含对包的引用。
index.html与合并版本。所以浏览到
http://localhost:8080/src/index.html只是向您显示该文件，因为它在磁盘上。
src/index.html在添加
HtmlWebpackPlugin 之前，文件看起来像这样:
<body>
<div id="app">it worked</div>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
HtmlWebpackPlugin 之后, 浏览到
http://localhost:8080给你这个合并版本:
<body>
<div id="app">it worked</div>
<script type="text/javascript" src="main.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
HtmlWebpackPlugin添加。
http://localhost:8080/src为您提供磁盘上的内容
src/index.html :
<body>
<div id="app">it worked</div>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
HtmlWebpackPlugin是让它为您插入包引用，这意味着您应该删除
<script>标签来自
src/index.html .这反过来意味着浏览到
src/index.html将不再工作，因为您不再有对您的包的引用!
HtmlWepbackPlugin插入
<script>为您标记，这意味着您现在必须浏览到
http://localhost:8080/index.html获取它生成的版本。
关于webpack - HtmlWebpackPlugin 对 webpack dev server 的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49983799/
28
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
i=5 expr $i + 6 1>/dev/null 将标准输出重定向到/dev/null。怎么样 expr $i + 6 >/dev/null expr $i + 6 1>/dev/null 和
在 R 中，可以握住设备，绘制图片，然后刷新设备来渲染图形。这对于具有数千个数据点、颜色渐变等的非常复杂的绘图非常有用，因为如果不保持，设备将在每次绘图操作后刷新。效果非常好。 但是，一旦绘图就位，任
我想通过串口dev文件执行IPC管道。这是要求首先我尝试使用 sudo socat /dev/ttyS0,raw,echo=0,crnl /dev/ttyS1,raw,echo=0,crnl 报错如下
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve thi
我正在尝试使用 mpg123 播放随机歌曲命令行。但不知道我的默认音频设备是什么。或者如果我需要使用“-a”选项指定任何其他音频设备。/dev/audio 和/dev/dsp 都是音频设备。如何知道哪
我可以看到/dev/uinput 和/dev/input 都存在于我的 Ubuntu 中并且它们很相似。它们可用于检测/模拟按键/鼠标/触摸事件。所以我对它们之间的区别感到困惑？谢谢! 新增:是的，我
cat/dev/urandom 总是一种在显示器上创建滚动字符的有趣方式，但会产生太多不可打印的字符。 有没有一种简单的方法可以在命令行上对其进行编码，使其所有输出都是可读字符，例如 base64 或
是否可以在没有 bit.dev 帐户的情况下将 bit 设置为本地服务器以进行内部处理？ 我知道您可能没有相同的功能 -- bit's FAQ page说“与 Bit CLI 不同，bit.dev 服
我试图在 Ubuntu 的启动过程中尽早采样一些随机性。我想知道是否有人建议如何做到这一点。我目前的想法是寻找/dev/random 和/dev/urandom 在引导序列中创建的位置，并在那里添加我
我正在尝试使用'dotnet dev-certs'工具导出https证书以包含在Docker镜像中。现在我正在使用: dotnet dev-certs https -v -ep $(HOME)\.as
我发现非常方便的 dev.copy2pdf 命令可以将我正在查看的窗口复制到 pdf 文件中，如下所示: plot(rnorm(1000)) dev.copy2pdf(file="myfile.pdf
谁能告诉我为什么从硬盘驱动器上清除数据时出于安全性考虑首选/dev/random？ 最佳答案 简单的答案，/dev/random不是首选。两者同样安全。使用/dev/zero可以更轻松地进行验证。还可
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
我有一个从 initramfs 镜像启动的嵌入式 Linux(vanilla、3.3.8、i486、Vortex86dx)系统。 我有一个 IDE 闪存盘，在/dev/hda1 和/dev/hda2
在Linux中，/dev/ttyS0和/dev/ttys0有什么区别？ 我知道第一个是串行端口，但第二个是什么，带有小的 s？ 最佳答案 see this For a pseudo terminal
我有一些命名空间的测试被自动加载到包 A 中使用 "autoload-dev": { "psr-4": { "Vendor\\PackageA\\PhpUnit\\": "te
我意识到/dev/stdout 和/dev/stderr 文件在没有根目录的 Android 设备上不存在。我同意这一点——但我需要一些方法来在我的 shell 脚本中重定向输入/输出——包括将输出重
我想对使用 composer 安装的软件包的最低支持版本运行测试，但理想情况下我想要最新版本的开发软件包。 具体来说，我想运行它来安装最低版本的软件包以进行测试: composer update --
我必须将开发分支从 testing 重命名为 tom 。重命名后，我必须创建一个具有相同名称的开发分支，它是 testing 并且它应该指向 master 的特定提交。 我已将分支重命名为: git
我是一名优秀的程序员,十分优秀！