vue2+webpack4搭建一个基本项目结构

为什么要使用vue+webpack搭建项目结构，而不直接用vue-cli？

使用vue-cli搭建一个项目是比较简单方便的，可以直接让我们进入到开发阶段，但也导致我们对一个项目的基础结构不是那么清晰，和一些插件更新没那么方便。

初始结构

新建一个文件夹，可以命名为ziXingGouJian，然后打开终端，开始初始化

文件夹中就会多了一个文件package.json。
安装框架的基本需要：
npm i vue webpack vue-loader -D（vue-loader是解析与转换vue文件，也就是将其中的逻辑代码，样式代码，HTML提取出来，在分别交给对应的loader处理）
npm i webpack-cli -s -d
npm i css-loader vue-template-compiler -D（css-loader：加载css代码，vue-template-compiler：把html编译成对应的可执行的js代码）

等待几分钟，安装，如果安装报错，就继续在安装就可以，有可能是等待时间过长导致的

安装好了之后，在根目录下新建一个src文件夹，里面新建app.vue，main.js（main.js是入口文件）


然后在根目录下新建 webpack.config.js 文件，他做的是分析项目结构，将里面浏览器不能直接运行的模块打包成合适的文件供浏览器使用。

webpack会把文件打包成一个bundle.js，并且浏览器能够识别。现在进到package.json在scripts里面添加一段脚本。

去到终端运行npm run build

这样就将文件打包好了，会生成一个文件夹dist，里面存放着bundle.js。

继续深化

项目已经可以打包了，但还不能在浏览器运行。为了能够在本地运行项目，我们可以安装
npm i webpack-dev-server -s -d
npm i html-webpack-plugin -d -s

安装完成之后，进入webpack.config.js配置一些信息。

然后进入package.json里面再加一段脚本

进入终端运行npm run dev

本地服务就已经打开了。至此一个基本的项目就差不多构建完成了。

扩展

前面已经把一个基本的结构都构建好了，但这是一个vue的项目结构，vuex，vue-router总不能少吧，所以继续安装。

npm i vuex vue-router -s -d

安装好了之后，在src文件夹下新建store文件夹，里面在新建index.js存放vuex，在src文件夹下新建router文件夹，里面在新建index.js存放router。
在文件里面分别写好相应的配置，在引入到main.js里面（也就是入口文件）




写项目必定会有css文件，图片资源，使用webpack打包也是需要做相应处理的。
在前面已经安装过了css-loader，所以在这里只需要安装style-loader，
file-loader，url-loader，如果需要使用less或者是sass也是需要安装相应loader的。（这里使用less举例）

npm i style-loader -D
npm i file-loader -D
npm i url-loader -D
npm i less-loader less -D

安装完成后进入webapck.config.js，添加如下配置。

至此，这个项目结构差不多了，之后可以根据自己的业务慢慢添加即可。