最近看了不少的项目，有那么一些疑惑。虽然我知道main.js是入口文件，但我不知道它怎么关联index.html。 我以为index.html 会有Import xx from ./main?亦或者 不过好像并没有这些痕迹。

顺晟科技：

所以有人能解释一下吗？

vue-cli 实质是封装了很多配置的webpack项目webpack是用来做前端项目打包以及编译功能,类似与后端的maven.至于入口JS是怎么引入的,就要看webpack的插件之一,html-webpack-plug这个插件的功能就是来处理html页面,并按照配置引入编译后的js 以及CSS.在项目目录build下有一个名称为webpack.dev.config.js这个就是我们的用于开发环境的webpack的配置文件

不清楚你们项目结构，脚手架自动创建的项目，有App.vue和main.js，main.js里面需要import App from “./App.vue” ，创建Vue实例的时候，挂载到App.vue中的#app就可以渲染了

没错，我们写的所有的 js，组件，都是通过构建工具打包成一个独立的 js 文件，例如打包后的 js 文件名为 app.bundle.js 。然后，你再把这个 js 文件在 index.html 引入一下就可以使用了：

这里有一句 const HtmlWebpackPlugin=require(‘html-webpack-plugin’)这一句就是在webpack中引入html文件的处理插件用法如下:

当下最热门的构建工具无非就是 webpack。不知道的同学可以自行去看中文官方文档，指南中说的很清楚。

手动引入不太方便，所以 webpack 官方提供了一个插件 HtmlWebpackPlugin 自动帮你加载构建后的脚本。

new HtmlWebpackPlugin({filename: ‘index.html’,template: ‘index.html’,inject: true}),

帮我做的无影无踪的感觉 论答案还是老哥你的稳

实际上 vue-cli 出来的项目都在某个角落隐藏着一个 index.html（有形或无形）。如果你用最新版的 vue-cli 创建新项目，这个文件位于 public 目录下。而这个文件实际上是一个模板（EJS 语法），Webpack 会在每次打包后将 entry 文件的路径写入这个模板指定的位置并生成一个新的 index.html 放到 dist 目录（这个行为本身是在 Webpack 配置中定义的，不是 Webpack 的默认行为）。实际上 main.js 也是关联了 index.html 的，只不过这个关联 Webpack 帮你做了。

这一句就是html-webpack-plugin 插件的配置,其中filename就是输出名称,template就是你的源html文件,这里面还有一个参数,这没有标明,他是chunk,这个参数如不写,则默认把所有的output;内输出的JS文件全部引入vue-cli引入js大概就会这个流程,如果楼主需要详细的了解,还请多学习下wbepack npm 的相关知识

一般我们的网站都是单页面应用，即项目中只有一个 index.html 。那我们的写的组件啊，自定义的 js , 如何在 index.html 中引入呢？

反了吧，既然main.js是入口，那么main.js应该import xx from ./index

构建工具(webpack,glup等),可以看做是一个平台,npm 包可以说是他提供的功能,而有的功能就可以将输出的信息填充到 index.html 中,cli 采用了这个功能,并且包装了一番,所以你只需要build 即可同样地,你自己也可以在基于构建工具上写出调用相关联的代码

希望能帮到你~ 微笑！

const baseWebpackConfig = require(’./webpack.base.conf’);const CopyWebpackPlugin = require(‘copy-webpack-plugin’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin’);const portfinder = require(‘portfinder’);

脚手架工具（比如 vue-cli）和构建工具（比如 Webpack）掩盖了很多细节。

假如main有import index 那也没用啊 渲染不出来。 可是 main也没有 import ./index

这就引出了另外一个东西： 构建工具。

老哥稳，受教了。感谢