基于Vue-cli使用webpack进行打包
准备
1、使用vscode
安装vetur、eslint、Live Server、HTML CSS Support
JavaScript Snippet pack、HTML snippets、path Intellisense
2、安装node.js
3.配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache
然后在cmd命令下执行如下两个命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
执行完后，配置环境变量，如下：
- “环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:\Program Files\nodejs**node_global\node_modules**”，如下图：
- “环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“D:\Program Files\nodejs\node_global”，如下：
配置完成。
然后在cmd命令下执行 npm install webpack -g 安装webpack ,检查webpack -v
详情请看https://www.cnblogs.com/aizai846/p/11441693.html
4、安装命令行工具
npm install -g vue-cli
-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.
安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了
5、创建项目框架
vue init webpack my-project
创建一个基于"webpack"的项目,后面是项目名,
按照提示输入,项目名,项目描述,项目作者 等等,看到最后这句项目就创建好了,
执行 vue init webpack my-project 注意（my-project）是自己的项目名
回车既可，等待加载配置
注意y表示yes，n表示no
？ Project name ( my-project ) 敲y, 回车既可
？project description ( A Vue.js project ) 敲回车既可
？Author ( xxxxxx ) 敲回车既可
？ Vue build ( user arrow Keys ) 敲回车既可
? Install vue-router？（Y/n）敲Y回车既可 （是否安装路由）
？Use ESLint to lint your code？ (Y/n) 敲n回车既可（是否安装路由）
？Set up unit tests (Y/n) 敲n回车既可 ( 单元测试， 个人觉得不安装选择n )
？Setup e2e tests with Nighwatch？(Y/n) ( e2e测试，个人觉得不安装选择n )
？Should we run `npm install` for you after the project has been created？ (recommended) (use arrow Keys)
这里是选择安装方式
等待安装即可
项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的
6、运行
安装成功！找到当个创建的那个文件
npm run dev 运行
在浏览器访问localhost:8080
目录结构：
build、config:webpack的配置文件
node_modules:安装工程所需要的依赖
src：源码目录
static：静态资源
index.html模板页，因为vue是模块化开发 所以一般不会写html，写的是.vue文件，在打包编译的时候会自动生成.html
style scoped表示当前的style只在当前组件生效
webpack介绍
是一个现代javaScript应用程序静态模块打包器
相对于java的万物皆对象来说，webpack万物皆模块
1、由来
由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。
2、介绍
webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。
遵循commonsJs规范，该规范核心思想是允许模块通过require方法来同步加载所需的依赖的其他模块，然后通过exports 或者module.exports来导出需要暴露的接口
3、使用
1、创建两个js，将hello.js看成一个组件，模块并将内容暴露出去
2、在mian.js中去引用，相当于java的导包
并引用hello.js中的sayhai
3、写好了两个js还是不能马上使用的，要使用webpack的配置，内容从文档中cp下来,下面是简单的配置
module.exports = {
entry : './modules/main.js', // 入口文件
output : {
filename : './js/bundle.js' //打包之后输出的文件名
}
};
4、写好之后，cmd进入到文件目录下进行打包
webpack 打包好后生成合并的js，在html中引用则可以使用