为什么 Vue CLI 创建的项目的 index.html 并没有引用 Webpack 的打包文件也能够运行呢？

作者站长头像
站长
· 阅读数 12
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vue-cli-create-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>

我看了一下 @vue/cli-service 的包有 html-webpack-plugin，可能是 html-webpack-plugin 配置的？

回复
1个回答
avatar
test
2024-07-14

html-webpack-plugin 会在 webpack 打包时生成 index.html 并且放置在 webpack-dev-server 设置的静态资源服务文件夹，因此会替换掉默认的 index.html通常用户设置的 index.html 会作为 webpack-dev-server 调用 webpack 打包能力时通过 html-webpack-plugin 的模版，基于此生成一个 index.html，因此像 vue cli 此类脚手架会在配置中设置插入打包文件的脚本引入，因此无需用户手动配置

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容