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

发布于
2022-11-30 广西桂林市

  <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 配置的？

javascript node.js vue-cli

阅读 2.1k

2 个回答

得票最新

pandoralink

8532957

发布于
2022-12-01

✓ 已被采纳

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