VUE什么是webpack Webpack是一个现代JavaScript应用程序的静态模块打包器。它把你的项目当做一个整

什么是webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器。它把你的项目当做一个整体，通过给定的入口文件开始找到你的项目所有依赖模块，使用loaders处理它们，最后打包为一个或多个浏览器可识别的JavaScript文件，可以减少页面请求，优化网页性能。

如何使用Webpack

一、安装node JS (webpack在执行打包压缩的时候是依赖nodejs的)，请参考node JS官网进行下载安装

二、初始化一个node js模块

1、创建一个目录并在终端中进入当前目录执行npm init -y

2、安装webpack和webpack-cli(命令行工具)：

npm install webpack webpack-cli --save-dev 或者使用淘宝镜像安装,请直接百度“npm 淘宝镜像”，安装过淘宝镜像后再安装其他安装包时可直接把上面命令行的npm替换成cnpm

三、打开webpack.config.js文件，定义入口和输出

四、在package.json文件中添加一个npm脚本，这样运行本地的webpack比较方便

五、在终端中运行 npm run build 就可以在dist文件夹下生成打包后的bundle.js文件

webpack处理第三方文件类型的过程

1.发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则

2.如果能够找到对应的规则，就会调用对应的loader处理这种文件类型

3.在调用loader的时候，是从后往前调用的，比如本例中就是先调用css-loader，再调用style-loader

4.当最后的一个loader调用完毕，会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去

webpack-dev-server支持两种模式来自动刷新页面.

iframe模式(页面放在iframe中,当发生改变时重载) inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中) 两种模式都支持热模块替换(Hot Module Replacement).热模块替换的好处是只替换更新的部分,而不是页面重载.