webpack及vue-cli脚手架

webpack是一个现代js应用程序的模块打包器（module bundler），分析项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack作用：
前端越来越复杂，特别是SPA（single page web application）流行之后，一个应用程序往往会依赖很多其他的模块，或者编译scss、less、stylus等，如果仅仅靠人来管理是不可能的，必须依赖于webpack来解决。

webpack4个重点内容：

入口（entry）
输出（output）
加载器（loader）
插件（plugins）

webpack安装：
注：先安装node环境
操作建议：

1. npm install nrm -g // 安装nrm
2. nrm ls // 查看镜像源
3. nrm use taobao // 选择淘宝镜像，也可以选择cnpm

4.npm install webpack webpack-cli -g

vue-cli

vue-cli是官方脚手架工具。
项目结构的架子，里面有一些最基本的结构配置。
可以利用脚手架快速完成webpack的基本配置。
vue-cli文档
如果全局安装了旧版本的vue-cli（1.x或2.x），需要卸载它

npm uninstall vue-cli -g
或者
yarn global remove vue-cli

安装：

npm i @vue/cli

安装后，就可以在命令行中访问vue命令。可以简单运行vue，看看是否展示出所有可用命令的帮助信息，来验证是否安装成功

vue-version

快速创建一个基于webpack的脚手架项目结构

vue create

webpack配置不足以支持对vue文件的解析转换，所以需对webpack进行新的配置，让其能够支持vue文件类型的打包转换
添加webpack对vue文件的支持
下载：

npm install -D vue-loader vue-template-compiler

配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
{
    test: /\.vue$/,
	loader: 'vue-loader'
}
// 请确保引入这个插件！
new VueLoaderPlugin()