参考：https://blog.csdn.net/nsrainbow/article/details/80589476

一个好的教程：

首先创建一个空的文件夹：

mkdir learn-vue

cd learn-vue

然后新建一个index.html文件：

此时的结构：

添加vue.js的引用：

创建DOM组件：

创建js组件：

完整的文件：

浏览器访问index.html：

webpack登场：

webpack是一个js打包工具，使用webpack你可以在一个js文件中使用 import 或者 require 来引用另外一个js文件中定义的组件。

不消说，这样你就可以把js组件分文件存放了。

创建package.json文件：

安装webpack

npm i --save-dev webpack webpack-cli

安装完毕后，此时package.json的内容为：

多了一个node_modules核package-lock.json。

通过webpack就可以把多个js文件打包成一个js文件。

使用了webpack就可以使用import语句来导入别的js文件。

好处1：不需要将公共库的js引用写到页面上来了，比如vue的引用就不需要写到index.html页面上了。

好处2：可以将你的所有js脚本可以按模块来分文件存放了。

现在开始抽离index.html中的js部分到独立的js文件中：

新建一个src文件夹，并在其中建立main.js。 并将index.html中的js语句移动到这个文件中，文件的内容为：

修改index.html中关于js的引用：

此时再次访问index.html，还是得到相同的结果：

但从上面的过程看，似乎没有什么区别。

只是简单的将部分js代码放到单独的文件了。截止到此时，还没有使用到webpack。

创建webpack的配置文件：

创建dist目录：

打包：

此时，main.js（入口文件）被打包为了bundle.js（出口文件）文件。

现在，修改index.html的引用：

再次访问：

截止到这里，没有什么大的变化。

短暂的总结：（目前经历了三版）

第一版：全部集中在一个文件。

第二版：将js部分拆分到main.js中。

第三版：将js部分打包到bundle.js中。

截止到现在，vue.js还是通过script的形式引入到index.html中，接下来要改变这种方式。

首先去除index.html中对于vue.js的引用：

问题是：我们的js脚本用到了Vue，但你现在去掉了vue.js的引用，岂不是要报错？

现在我们要换一种方式。

首先将vue安装到本地：

npm install --save vue

package.json的内容：

此时node_modules中也多了vue目录。

然后在main.js中引用vue：

再次构建一次项目：

npx webpack

浏览器访问index.html：

这是因为如果你直接写 import Vue from 'vue' 那么调用的是运行时的vue版本，这个版本不带模板解析包。

我们之前在index.html页面上引用的也不是运行时版本。

修改main.js：

再次打包：

现在访问index.html就正常了。