webpack 构建基本配置参数
基本原理
每个前端项目或者说每一个HTML页面，都有着不同的静态资源，其中js文件有相互之间又有着不同的依赖，img图片需要进行图片压缩合并，css文件有需要进行浏览器样式的兼容写法，这些都可以通过webpack这个工具把所有不同的文件用一个引子进行打包最终生成一份 html ，css ，以及图片资源。构建之后的文件，就是发布到线上的最终文件，也成为发布文件。
核心概念之 ：entry
入口文件就是webpack进行构建的入口文件，格式是一个字符串
当需要对多个文件进行构建的时候，entry格式是一个对象，这种情况是最常用的，在日常开发中，每一个功能模块都会构建成单独的js，这样也是减少构建后对代码的影响，举个例子就是，我们的项目通常修改一个代码之后，只要改动当前模块的js而不是这个项目的代码全部进行改动，只改动那个模块的代码上线也只是发那个模块的js即可。
核心概念之 ： output
输出文件就是webpack进行构建后生成的构建代码目录，格式是一个字符串
多个文件的情况下是使用一个对象，和一个 name 的占位符进行标记
最终构建
核心概念之 ：Loaders
webpack 开箱即用能支持的只有JS文件和 JSON 文件，而其他的文件像图片文件 jpg png 或者是 css 文件，这一些就需要使用到Loaders 去支持转换成有效模块。
常用的 Loader
- babel-loader ES6,7等新语法的转换，兼容浏览器。
- css-loader 样式文件的加载和解析
- sass-loader 将sass转换成css，还有less-loader也常用
- ts-loader 将typeScript 转换成JavaScript
- file-loader 进行文件或者字体的打包
- raw-loader 将文件以字符串的形式导入
- thread-loader 多进程打包js和css，加快构建速度
Loaders 的使用方法
test 是指定的匹配规则，use 是指 loader的名称
核心概念之：Plugins
插件用于 bundle 文件的优化，资源管理和环境变量注入
插件目的在于解决 loader 不能解决的事情。
比如构建之前删除目录，或者是将构建出来的js文件注入到html文件中，这个就是 plugins做的事情。
常用的 Plugins
- CommonsChunkPlugin 将相同模块的代码合并成一个公用的JS文件
- CleanWebpackPlugin 清理构建目录
- ExtractTextWebpackPlugin 将css从bundle文件中提取出来
- CopyWebpackPlugin 复制文件到构建目录
- HtmlWebpackPlugin 生成 html 文件去承载输出的 js文件
- ZipWebpackPlugin 将构建资源打成一个 zip包
Plugin 使用方法
核心概念之 ：Mode
用来指定当前构建的环境，是 开发环境还是生产环境，参数分别是 development ， production，还有 none。默认是 production。
内置功能描述
如果配置的是 development ，大致上他会加载一个基于debugger 的plugin，查看出现问题的模块，通过配置的是 production ，那么他会加载一些压缩，检查代码等优化代码的 Plugin。
webpack基础应用
编译ES6格式
在module下增加一个rule，use ：babel-loader，而babel-loader是依赖 .babelrc配置文件的。所以，要在项目中增加一个 .babelrc文件。同时 安装一下
npm install @babel/core @babel/preset-env babel-loader --save-dev
编译 React JSX 语法
在.babelrc 原有基础上增加 @babel/preset-react
编译 css 样式文件
css-loader 用于加载 .css 文件，并且将css 文件转换为 commonjs 对象
style-loader 将样式转换为 style 标签插入到 head 中，同样先安装一下
npm install style-loader css-loader --save-dev
在module 中的规则再引入 style-loader 和 css-loader ，这里需要提一下的是，loader的调用是链式调用顺序也是从右到左，所以在这里需要将style-loader放前面。
这样的话他会先执行css-loader，先把css-loader进行解析然后传给style-loader，把样式注入到html中。
但是，现在的开发一般会直接构建css的不多，像我的习惯是用 sass 进行开发，所以用编译sass就是在原来的的基础上加上 sass-loader
编译文件
file-loader 就是用于编译文件的，比如图片，字体
编译字体
可以用 file-loader 或者 url-loader
文件监听
在正常开发的过程中，如果每一次都要手动构建再去看效果的话，这样会很繁琐。所以，就可以使用webpack 的 watch 功能，在修改完代码之后，就可以自动构建。
在 webpack 后面再增加 -watch 命令即可。
watch-dev-serve
上面提到的 watch 方法 ，虽然可以监听变化在刷新页面的时候可以更新，但是在webpack中，有更好的方法去处理。
WDS 可以在修改代码的时候不用手动刷新页面才能看到效果，而是让他自动构建刷新页面更新
他构建之后代码是放在内存里面而不是在本地生成文件。
使用的是HotModuleReplacementPlugin插件
在改完之后，浏览器就可以看到修改后的效果。当然，小项目可马上看到效果，如果是真实的项目，或者是在大厂接手的大型项目，那么构建还是需要一定时间，并不是改完就可以看到，因为项目很大构建起来就算是苹果电脑也要等一下才能看到效果。
代码压缩
在开发完成之后，上线之前还是要把代码压缩一次，毕竟可以让体积变得更小。
需要压缩的就是 html js 和css 这三个部分
js压缩和css 压缩
js ：uglifyjs-webpack-plugin 这个插件在webpack4中已经内置，构建之后就是默认压缩的。
css ： optimizeCssAssetsWebpackPlugin 需要 cssnano 处理器的配合
html压缩
htmlWebpckPlugin
一个页面配置一个 plugin
配置参数
template：模板所在位置
filename：构建输出文件的名称
### 文件哈希值
文件哈希值用来做版本的管理，一般文件改动到的话才会改变，如果没有改变文件，那么的哈希值是不会变的。
首先，文件指纹在dev环境中是不需要的，只有线上版本才需要
给webpack 新增一个 dev 和 online 版本，然后在package.json中，增加 --config 。。。的配置，指定构建的config 文件
还有css，js ，图片增加指纹等操作，可能已经是深夜，开始疲惫了
基础的就参考文档吧，按文档来准不会错。