Vue Webpack使用
什么是Webpack？
webpack是一个现代js应用程序的静态模块打包器，当webpack处理应用程序时，它会递归地构建一个以来关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需要以来的其他模块，然后通过exports或module.exports来导出需要暴露的接口。
ES6模块
EcmaScript6 标准增加了 js语音层面的模块体系定义。es6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS和AMD模块，都只能在运行时确定这些东西。
优点
- 容易进行静态分析
- 面向未来的es标准
缺点
- 原生浏览器端还没有实现该标准
- 全新的命令，新版的NodeJS才支持
实现
- Babel
安装Webpack
Webpack 是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
安装：
npm install webpack -g
npm install webpack-cli -g
测试安装成功：
webpack -v
webpack-cli -v
使用webpack
1.创建项目
创建一个空文件夹，用IDEA工具打开。
2.创建一个名为 modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如：hello.js,用于编写JS模块相关代码。
//暴露一个方法 exports.sayHi=function () { document.write("<h1>ES6</h1>") };
4.在modules下创建主模块文件，如：main.js,用于调用hello.js的方法。
var hello=require("./hello");//引用一个组件 hello.sayHi();
5.创建webpack.config.js打包文件，并配置程序入口和输出出口
module.exports={ entry:'./modules/main.js',//程序入口 output:{//输出 filename:"./js/bundle.js" } };
6.在 Terminal 中输入打包命令，打包所有JS 成为一个bundle.js
webpack
7.新建index.html 测试打包后的bundle.js，查看结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>
</html>
