webpack-plugins(二)

plugins

作用于webpack的整个过程，webpack有类似打包前、打包中、打包后的钩子，plugins根据自己的需求可以在webpack打包过程的钩子中去触发

htmlwebpackplugin会在打包结后，自动生成一个HTML文件，并把打包生成的js模块引入到该html中。

支持ejs语法,例如title

name	decription
title	用来生成页面的title元素`<%= htmlWebpackPlugin.options.title %>`
filename	写入HTML的文件。默认为index.html。可以在这里指定一个子目录（如：assets/admin.html）
template	webpack模板的相对或绝对路径。默认情况下，它将使用（src/index.ejs如果存在的话)
inject	注入所有的资源到特定的template或者temlateContent中。如果设置为true或者body，所有的JavaScript资源将放到body底部。head将javascrit资源放到head元素中。
favicon	添加特定的favicon的路径到到输出的HTML文件中
filename:	输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦目录。
inject:	true 、'head' 、 'body' 、 false ,注⼊入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon:	添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify:	{} 、 false , 传递 html-minifier 选项给 minify 输出
hash:	true 、false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS ⽂文件，对于解除 cache 很有用。
cache:	true 、false，如果为 true, 这是默认值，仅在文件修改之后才会发布文件。
showErrors:	true 、false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚面中
chunks:	允许只添加某些块 (⽐如，仅 unit test 块)
chunksSortMode:	允许控制块在添加到⻚面之前的排序方式，⽀支持的值:'none' 、 'default' 、{function}-default:'auto'
excludeChunks:	允许跳过某些块，(⽐比如，跳过单元测试的块)

mini-css-extract-plugin

把css抽离成独立的文件，然后以link的方式插入到head中此loader不能和style-loader(操作dom的方式把css插入到head中)一起使用，

 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, "css-loader"]
}
new MiniCssExtractPlugin({
  filename: "[name][chunkhash:8].css"
})

hash、contenthash、 chunkhash

hash // 每次打包都会变
contenthash  // 和内容有关系，只有内容变了contenthash才会变
chunkhash: // 一个入口肯定只有一个chunk， 一个chunk不一定只有一个依赖

sourceMap

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。在dev模式中，默认开启，关闭的话可以在配置文件⾥devtool:"none"

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

source-map: 产生 .map ⽂文件

cheap:较快，不包含列列信息

Module:第三方模块，包含loader的sourcemap(比如jsx to js ，babel的sourcemap)

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

inline-source-map：不会生成.map文件，但是会在输出的文件的最后一行增加base64的映射关系

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/5/11/17203d34ba853e4b~tplv-t2oaga2asx-image.image)

推荐设置

devtool:"cheap-module-eval-source-map",// 开发环境配置
//线上不推荐开启
devtool:"cheap-module-source-map", //如果非得开启 -> 线上请用此配置

WebpackDevServer

会帮助我们刷新整个浏览器

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

 
devServer: {
    contentBase: "./dist",// 指定本地服务器静态资源目录
    open: true, // 是否打开浏览器窗口
    port: 8081， // 设置端口
    "/api": {
        target: "http://localhost:9092"
    }
},

// 然后看不到输出dis目录，放到物理内存中，速度加快

// 创建⼀一个server.js 修改scripts "server":"node server.js"
//server.js
const express = require('express')
const app = express()
app.get('/api/info', (req,res)=>{
    res.json({
        name:'Tom',
        age:5, 
        msg:'欢迎'
    }) 
})
app.listen('9092')
//node server.js
http://localhost:9092/api/info


//index.js
import axios from 'axios'
axios.get('/api/info').then(res=>{
    console.log(res)
})

Hot Module Replacement (HMR:热模块替换)

CSSHMR： HMR不可和mini-css-extract-plugin一起用，否则css不生效说名不支持抽离成单独文件的css,即不支持mini-css-extract-plugin，

假如说我非得想抽成独立的文件，那么可以开发环境没必要抽离成独立文件吧，即开发环境继续使用热更新，在生产配置中使用mini-css-extract-plugin抽离成独立的css文件

JSHMR

//accept(需要监听的文件， 文件改变后的回调)
// webpack 本身是基于nodejs的是支持commonjs规范的，开启hot后会在module上增加一个hot属性
if (module.hot) {
  module.hot.accept("./b", function() {
    document.body.removeChild(document.getElementById("number"));
    number();
  });
}

HMR公用配置

const webpack = require("webpack");

devServer: {
  hot: true,//开启hmr
  //即便HMR不生效，浏器也不自动刷新，就开启hotOnly
  hotOnly: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
],