webpack初始（2）

3.5 plugin

作用于webpack打包整个周期，webpack的打包过程是（有生命周期概念）钩子
扩展插件，在 Webpack 构建过程中的特定时机注入扩展逻辑来改变构建结果或想要做的事

3.5.1 HtmlWebpackPlugin

htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模板加入到该html中

npm install --save-dev html-webpack-plugin
new HtmlWebpackPlugin({
            title:'hello world',
            template:'./index.html'
 }),

配置：

名称	作用	eg
title	生成html页面中的header	需要设置html中title为（固定格式） <title><%= htmlWebpackPlugin.options.title %></title>
filename	输出的html文件名 默认是index.html,也可以直接配置带有子目录的	'/public/index.html'
template	模板html文件路径	./index.html 绝对路径相对路径都支持
inject	true或body或false或head	默认true，前两者添加js到body底部，后两张添加js到head
favicon	ico的路径，会自动输出到生成的目录中	'./favicon.ico'

3.5.2 clean-webpack-plugin

在打包的时候清除生成的无效文件

npm install --save-dev clean-webpack-plugin

const {CleanWebpackPlugin}=require('clean-webpack-plugin');

new CleanWebpackPlugin(),

3.5.2 clean-webpack-plugin

抽离css并且把css添加到html上

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
需要再css-loader前加一个loder
{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, "css-loader"]
}
new MiniCssExtractPlugin({
  filename: "[name][chunkhash:8].css"
})

3.6 devtool

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码

devtool的介绍：https://webpack.js.org/configuration/devtool#devtool

eval:速度最快,使用eval包裹模块代码,

source-map： 产生 .map 文件

cheap:较快，显示行数，不包含列信息

Module：第三方模块，包含loader的sourcemap（比如jsx to js ，babel的sourcemap）

inline： 将 .map 作为DataURI嵌入，不单独生成 .map 文件

开发环境推荐开启
devtool:"cheap-module-eval-source-map"

3.7 WebpackDevServer

启动服务，提升开发效率

• 安装

npm install webpack-dev-server -D

• 配置修改下package.json

"scripts": {
  "server": "webpack-dev-server"
},

• 在webpack.config.js配置

devServer: {
  contentBase: "./dist",//生成目录
  open: true, // 是否打开浏览器
  port: 8081, //端口
   proxy:{
            '/api':{ //以api开头的，不支持正则
                target:"http://localhost:3004",// 目标机器
                pathRewrite: {"^/api" : ""}//重写url 匹配可以使用正则
            }
     }
},
在启动的时候其实不生成文件，把文件都储存在物流内存中，提升开发效率

3.8 hot-module-replacement

HMR:热模块替换，不支持抽离出的css变化

npm i hot-module-replacement -D

devServer: {
  contentBase: "./dist",
  open: true,
  hot:true,//启用 webpack 的模块热替换特性
  hotOnly:true,//即便便HMR不生效，浏览器器也不自动刷新，就开启hotOnly
},
plugins: [
  new webpack.HotModuleReplacementPlugin()
]
如果非框架书写的
if (module.hot) { // 当模块b发生变化的时候，进行删除元素并重新执行
module.hot.accept("./b", function() {
  document.body.removeChild(document.getElementById("number"));
  number();
  });
}
// 框架书写的看框架使用的插件
[框架布局刷新](https://www.webpackjs.com/guides/hot-module-replacement/)

[文档](https://www.webpackjs.com/api/hot-module-replacement/)

4.babel

中文网站

babel是JavaScript编译器器，能将ES6代码转换成ES5代码，让我们开发过程中放心使用JS新特性而不用担心兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

Babel在执行行编译的过程中，会从项目根目录下的 .babelrc JSON文件中读取配置。没有该文件会从loader的options地方读取配置。

npm i babel-loader @babel/core @babel/preset-env -D
1.babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到@babel/preset-env来做
2.@babel/preset-env里包含了了es6，7，8转es5的转换规则
env是babel7之后推行的预设插件

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
}

通过上面的几步 还不够，默认的Babel只支持let等一些基础的特性转换，Promise等一些还没有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器器中缺失的特性

@babel/polyfill 以全局变量的方式注入进来的。windows.Promise它会造成全局对象的污染
npm install --save @babel/polyfill

按需加载，减少冗余
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                [
                    "@babel/preset-env",
                    {
                        targets: {
                            edge: "17",
                            firefox: "60",
                            chrome: "67",
                            safari: "11.1"
                        },
                        corejs: 2,//新版本需要指定核心库版本
                        useBuiltIns: "usage"//按需注入
                    }
                ]
            ]
        }
    }
}
useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。 它有三个参数可以使用： ①entry: 需要在 webpack 的入口文件里 import "@babel/polyfill" 一次。 babel 会根据你的使用情况导入垫片，没有使用的功能不会被导入相应的垫片。 ②usage: 不需要 import ，全自动检测，但是要安装 @babel/polyfill 。（试验阶段） ③false: 如果你 import
"@babel/polyfill" ，它不不会排除掉没有使用的垫片，程序体积会庞大。(不不推荐)
请注意： usage 的行行为类似 babel-transform-runtime，不会造成全局污染，因此不会对类似Array.prototype.includes() 进行 polyfill。