Webpack--Plugins

Plugins(插件)

 扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等
 插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。

1.HtmlWebpackPlugin

 作用：在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中
 安装：npm install --save-dev html-webpack-plugin
 使用：1.在webpack.config.js文件中使用require语句引入
    2.在plugins中配置信息
 配置信息：
  1.filename:生成的html文件名称,默认是 index.html
  2.template:html模板文件路径
  3.title:⽤来生成⻚面的 title 元素
  4.inject: true | 'head' | 'body' | false，注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
  5.favicon: 添加特定的 favicon 路径到输出的 HTML 文件中
  6.minify: {} | false， 传递 html-minifier 选项给 minify 输出
  7.hash: true | false，如果为 true，将添加 webpack 编译生成的 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有用
  cache: true | false，如果为 true，这是默认值，仅在文件修改之后才会发布文件
  showErrors: true | false，如果为 true，这是默认值，错误信息会写入到 HTML ⻚面中
  8.chunks: 允许只添加某些块 (⽐如，仅 unit test 块)
  9.chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，⽀持的值:'none' | 'default' |{function}-default:'auto'
  10.excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

2.clean-webpack-plugin

 作用：在每次构建前清理 /dist 文件夹
 安装：npm install --save-dev clean-webpack-plugin
 使用：1.在webpack.config.js文件中使用require语句引入
    2.在plugins中配置信息

3.mini-css-extract-plugin

 作用：提取 CSS 到一个单独的文件中
 安装：npm install --save-dev mini-css-extract-plugin
 使用：1.在webpack.config.js文件中使用require语句引入
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    2.与css-loader配合使用,代替html-loader
    3.在plugins中配置信息

4.sourceMap

 我们实际运行在浏览器的代码是通过 webpack 打包合并甚至是压缩混淆过的代码，所生成的代码并不利于我们的调试和错误定位，我们可以通过 sourceMap 来解决这个问题，sourceMap 本质是一个记录了编译后代码与源代码的映射关系的文件，我们可以通过 webpack 的 devtool 选项来开启 sourceMap
 使用：直接在webpack.config.js中配置即可
 编译后会为每一个编译文件生成一个对应的 .map 文件，同时在编译文件中添加一段对应的 map 文件引入代码
 同时，现代浏览器都能够识别 sourceMap 文件，如 chrome，会在 Sources 面板中显示根据编译文件与对应的 map 文件定位到源文件中，有利于我们的调试和错误定位

5.webpackDevServer

 每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验
 作用：自动刷新页面
 安装：npm install --save-dev webpack-dev-server
 启动：npx webpack-dev-server
    或在package.json中添加scripts,然后npm run server

 使用：修改webpack.config.js

6.Proxy

 作用：WebpackDevServer 内置了一个代理服务，通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer 内置的代理发送的请求属于后端 - node，不受同源策略限制)
 使用：在webpack.config.js下的devServer中配置proxy

 后端路由配置：

 前端代码发送ajax请求：

 通过 proxy 设置，当我们在当前 WebpackDevServer 环境下发送以 /api 开头的请求都会被转发到 http://localhost:8787 目标服务器下

7.Hot Module Replacement

 作用：局部（模块）更新，也就是不刷新页面，只更新变化的部分
 使用：在webpack.config.js中的devServer进行配置hot和hotOnly

 开启 HMR 以后，当代码发生变化，webpack 即会进行编译，并通过 websocket 通知客户端(浏览器)，我们需要监听处理来自 webpack 的通知，然后通过 HMR 提供的 API 来完成我们的局部更新逻辑