学习目的
学习前端构建化工具 webpack，能熟练掌握 并使用 webpack 对项目进行打包优化。
webpack介绍
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
为什么需要打包
可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽；把拓展语言（sass，less,ES6语法）转换成为普通的JavaScript，让浏览器顺利运行。
安装
webpack 4 需要全局安装 npm install webpack-cli -g
① 在项目目录中 进行初始化 ，初始化的主要目的是生成package.json文件
命令 npm init
② 项目目录安装 npm install --save-dev webpack
在命令行 输入 webpack -v 若输出版本信息 就说明安装成功
webpack的四个核心
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
①entry如果为数组，那么就是将这两个 js文件打包在一起
②entry如果为对象 （多入口和多出口）
[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
filename 用于输出文件的文件名
目标输出目录 path 的 绝对路径 ；需要用到 node.js 的 path 模块
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。
当 entry 是个对象的时候， output 的处理形式 参考 上面的 entry ↑↑↑↑↑↑↑↑。
loader
loader 让 webpack 能够去处理那些 非JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
例如：可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
可以把React中的JSX转换成JavaScript代码。
注意：所有的Loaders都需要在npm中单独进行 安装，并在webpack.config.js里进行配置。
loader的参数：
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
① ES6语法转化
命令：npm install --save-dev babel-loader babel-core 和 npm install --save-dev babel-preset-latest
babel-preset-XXX 的作用是告诉babel使用 哪种转码规则 进行文件处理。
preset 字段设定转码规则
ES2015 转码规则，使用ES2015的，也就是我们常说的 ES6 的相关方法$ npm install--save-dev babel-preset-es2015；
react 转码规则 npm install--save-dev babel-preset-react
latest 转码规则 是一个特殊的presets，包括了es2015，es2016，es2017的插件，npm install --save-dev babel-preset-latest
stage-x(stage-0/1/2/3/4)转码规则 stage-x和上面的 es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。
npm install --save-dev babel-preset-stage-X
env转码规则 npm install --save-dev babel-preset-env （现在推荐的）
配置babel 规则
第一种方式 通过 package.json，在package.json文件中增加一个“babel"属性，该属性是一个JSON对象，作用是设置项目中的babel转码规则和使用到的babel插件。
第二种方式 通过.babelrc文件，在项目根目录下新建.babelrc文件，里面只需输入babel”属性的值即可。
配置webpack.config.js文件
② 打包CSS style-loader、css-loader
我们需要两个loader解析CSS文件，分别是 style-loader 和 css-loader。
命令：npm install --save-dev style-loader 和 npm install --save-dev css-loader
在入口文件 main.js 中引入 CSS
已经将CSS样式打包进了 index.html
另外如果以后项目需要用到 less 或者 sass，相同的处理
比如以SASS举例
安装SASS
npm install --save-dev sass-loader
npm install --save-dev node-sass
在vue中修改style标签
就可以写样式了！
less安装命令 npm install --save-dev less 和 npm install --save-dev less-loader
③ 图片处理 file-loader、url-loader
我们需要两个loader处理文件，分别是 file-loader 和 url-loader
file-loader：解决引用路径的问题，比如 background的 url 样式，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，指向正确的文件。
url-loader：如果图片较多，会发很多http请求，降低页面性能。我们可以通过url-loader来解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。如果图片较大，编码会消耗性能，因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader。
url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为 DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader，因此我们只需要安装url-loader。
命令：npm install --save-dev url-loader
在CSS 中使用 图片
小于limit 的值的情况
在实际过程中，将图片打包进 HTML 会造成 代码的冗余，增加文件的大小，不打包进HTML，会增加 HTTP 请求，但是如果图片大量重复使用的话，浏览器会有缓存，下次请求会更快，而Base64的话，就会在多个重复的地方有一段相同的字符串，代码冗余程度加深。两者关系需要一个平衡，在实际项目中，需要自己去衡量、
大于limit值的情况
④ html-withimg-loader 解决HTML文件中引入 Img标签的问题
安装 npm install html-withimg-loader --save
image被打包好了，并且路径也会自动修改。
⑤ extract-text-webpack-plugin CSS与Js分离（看情况分离）
原来的打包过程中 JS代码 和 Css代码，都打包到了一起
webpack官方其实并不建议将CSS 和 JS 分离，他们认为CSS应该打包到JS中来减少http的请求数。如过项目需要，你可以分离，一般不推荐
坑：
npm install --save-dev extract-text-webpack-plugin
webpack4 使用命令 npm install --save-dev extract-text-webpack-plugin@next
⑥ 自动处理CSS3属性前缀
需要安装两个包postcss-loader 和 autoprefixer（自动添加前缀的插件）
PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，
安装 npm install --save-dev postcss-loader 和 npm install --save-dev autoprefixer
配置 webpack.config.js 的 loader
配置 postcss.config.js
和webpack.config.js同级的目录下，新建一个postcss.config.js文件。
⑦ 消除冗余的CSS样式
安装PurifyCSS-webpack 和 purify-css
npm install --save-dev purifycss-webpack
npm install --save-dev purify-css
配置 webpack.config.js，加入一下代码
const glob = require ('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
报错，暂时未解决。但是打包出来的文件都正确。
⑧ 图片压缩
安装 npm install --save-dev image-webpack-loader
插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
① html-webpack-plugin 插件 HTML文件的发布
首先安装 npm install html-webpack-plugin --save-dev
单页面的情况
minify 里的参数有很多 ，看文档。
多页面
② 配置JS压缩 uglifyjs-webpack-plugin(注意现在已经使用terser-webpack-plugin，此项跳过)
webpack 自己已经集成了 不需要安装
但是我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
webpack 的其他配置
服务和热更新
热更新，即修改代码，自动显示更新的结果，所见即所得。
安装 npm install webpack-dev-server --save-dev
配置 webpack.config.js
配置 package.json
在命令行输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。
输入 npm run server 后，做了以下事情
1.首先这个命令会去运行package.json文件里面的scripts脚本
2.scripts脚本首先通过babel把 main.js 编译
3.第三步是scripts会去执行webpack打包命令，该命令会去查找webpack.config.js配置文件中的entry和output，然后输出一个mian.js文件
4.然后就在本地可以打开 index.html 文件了
它可以监控到我们修改源码，并立即在浏览器里给我们更新。
webpack自动打包
在webpack.config.js中配置
命令行中输入 webpack --watch，会一直监听 ，修改html中的代码，就会自动打包。
