webpack-plugins(二)

·  阅读 149

plugins

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

HtmlWebpackPlugin

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: 允许跳过某些块,(⽐比如,跳过单元测试的块)
  1. 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()
],

复制代码

分类:
前端
标签: