webpack的使用

一、概述：
webpack是一个现代化的JavaScript应用的静态模块打包工具

目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6

    在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在通过模块化开发完成了项目之后，还需要处理模块间的各种依赖，并且将其进行整合打包。
    而webpack其中的一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系；不仅仅是JS文件，我们的CSS、图片、json文件等等在webpack中都可以被当作模块来使用

webpack为了可以正常运行，必须依赖node环境；node环境为了可以正常执行代码，必须其中包含各种依赖的包，所以必须有npm工具(node package manager)

二、安装
node.js是安装webpack的前提，node.js自带了包管理工具npm；(去官网下载)
cmd查看node的版本：node -v
cmd全局安装webpack(指定版本号3.6.0，vue cli2依赖该版本)：npm install webpack@3.6.0 -g
局部安装webpack(后续在IDE命令好安装)：npm install webpack@3.6.0 --save-dev

三、项目开发前准备工作
创建文件夹：
src：存在我们所写的源文件（main.js：项目入口文件，mathUtil.js文件）
dist：存在打包后的代码
index.html（后续会添加到dist目录中打包）：浏览器打开展示的首页html
先将mathUtil.js文件中内容导入到main.js中，此时其实就可以使用：webpack  main.js  dist/合并.js，进行打包
最后将打包后的js文件引入到index.html中即可

简化命令：
上述打包命令太长，创建webpack.config.js文件并添加如下代码：

指定打包文件的入口和出口，出口利用动态获取绝对路径+文件名

局部安装webpack：
一个项目往往依赖特定的webpack版本，全局的版本可能跟这个项目的webpack版本不一致，导致导包出现问题；所以通常一个项目都有自己局部的webpack
1、项目安装自己局部的webpack生成node_modules目录：npm install webpack@3.6.0 --save-dev
2、通过node_modules/.bin/webpack启动webpack打包

package.json中定义启动：
上述如果使用局部webpack打包命令打包的话，每次敲一长串命令不方便，所以可以在package.json的srcrpts中定义自己的执行脚本
1、IDE终端执行npm init命令，生成package.json文件（同时需执行npm install命令(生成package.json中指定的依赖包)产生package-lock.json文件[该文件的内容对应的依赖包版本更加具体，package.json中的包前：^10.2.3，只是要求下载的包版本为10.2.XX；如果是~10.2.3，则只要求下载的包版本为10.XX.XX]）
2、

那么之后执行的打包命令就变为 npm run build，执行该命令时首先会根据package.json中定义的script内容寻本地的node_modules/.bin路径中的命令，如果没有，则去全局的环境变量中寻找

安装相应loader：
loader是webpack中一个非常核心的概念
webpack主要来处理我们写的js代码，并且会自动处理js之间的各种依赖；但是，我们在开发中不仅仅有js文件，还有css、图片、也包括一些高级的将ES6转成ES5代码(兼容一些浏览器)，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转为js文件等等；而对于webpack本身来说，这些转化都是不支持的，我么需要对其扩展对应的loader

loader使用过程：
1、通过npm安装需要使用的loader   (复制官网webpackjs.com -> Loader)
2、在webpack.config.js中的modules关键字下进行配置 （复制官网webpackjs.com -> Loader）
引入处理样式文件的loader：
1、导包：

npm install --save-dev css-loader

npm install style-loader --save-dev

2、写配置文件：

[记得在入口文件main.js导入css文件等]

[注：css-loader只负责加载css文件，而style-loader负责将css样式嵌入到DOM中]

图片文件处理中的loader：
用到url-loader和file-loader

ES6语法处理：webpack打包的js文件，其中的ES6语法并没有转成ES5，那么就意味着一些对ES6还不支持的浏览器就不能正常运行我们的代码；
解决方法：使用babel-loader:
1、安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2、写配置文件

引入vue.js
后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来阻止vue的组件，所以我们应在webpack中集成Vuejs
安装vue(相当于加入vue.js文件)：npm install vue --save，这样就可以正常写vue代码了
但是这样引入还有一个问题：不能对模板进行编译，只能运行环境下使用
所以修改webpack.config.js中代码即可：

正常运行之后，考虑一个问题：如果我们希望将data中的数据显示在界面上，则必须修改index.html，如果我们后面自定义了组件，也必须修改index.html来使用组件，但是html模板在之后的开发中，并不希望手动地频繁修改，如何做呢？
做法：在vue实例中再定义template选项，对应的为在html中显示的内容；在之前的学习中，el用于指定Vue要管理的DOM，可以帮助解析指令，事件监听等；而如果Vue实例中同时制定了template，那么template模板的内容将会替换掉挂在的el的模板(DOM)

Vue文件的最终封装处理：
需要导入vue-loader和vue-template-complier来处理.vue的文件
导包：

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

写配置文件（webpack.config.js）：

 

例子：