资源解析：解析 React JSX

安装react-dom 和@babel/preset-react

npm i react react-dom @babel/preset-react -D

资源解析：解析CSS

先写style-loader，再写css-loader，使用css-loader解析css，解析好的css再传递给style

安装css-loader和style-loader

npm i style-loader css-loader -D

资源解析：解析 Less 和 Sass

安装css-loader和style-loader

npm i less less-loader -D

npm i sass sass-loader -D

资源解析：解析图片

安装file-loader

npm i file-loader -D

资源解析：解析字体

与解析图片差不多

资源解析：使用url-loader

limit单位是字节byte

Webpack 文件监听

⽂件监听是在发现源码发⽣变化时，⾃动重新构建出新的输出⽂件。 
webpack 开启监听模式，有两种⽅式： 
    -     启动 webpack 命令时，带上 --watch 参数 
    -     在配置 webpack.config.js 中设置 watch: true

webpack 中的文件监听使用

文件监听的原理分析

轮询判断⽂件的最后编辑时间是否变化某个⽂件发⽣了变化，并不会⽴刻告诉监听者，⽽是先缓存起来，等 aggregateTimeout 一起去构建

 module.export = { //默认 false，也就是不开启 watch: true, 
 //只有开启监听模式时，watchOptions才有意义 
     wathcOptions: { //默认为空，不监听的文件或者文件夹，支持正则匹配 
         ignored: /node_modules/, //监听到变化发生后会等300ms再去执行，默认300ms 
         //判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次 
         aggregateTimeout: 300, 
         poll: 1000 
     }
  }

热更新：

webpack-dev-server

WDS 不刷新浏览器; WDS 不输出⽂件，⽽是放在内存中; 使⽤ HotModuleReplacementPlugin插件;

{ 
    "name": "hello-webpack", 
    "version": "1.0.0", 
    "description": "Hello webpack", 
    "main": "index.js", 
    "scripts": { 
                    "build": "webpack ", 
                  + ”dev": "webpack-dev-server --open" //--open更新完成自动开启浏览器
               }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC" 
}

使⽤ webpack-dev-middleware

WDM 将 webpack 输出的⽂件传输给服务器适⽤于灵活的定制场景

const express = require('express'); 
const webpack = require('webpack'); 
const webpackDevMiddleware = require('webpack-devmiddleware'); 
const app = express(); 
const config = require('./webpack.config.js'); 
const compiler = webpack(config); 
app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); app.listen(3000, function () { 
                                    console.log('Example app listening on port 3000!\n'); 
                              }
           )

热更新原理分析

Webpack Compile: 将 JS 编译成 
Bundle HMR Server: 将热更新的⽂件输出给 
HMR Rumtime Bundle server: 提供⽂件在浏览器的访问 HMR Rumtime: 会被注⼊到浏览器， 更新⽂件的变化
bundle.js: 构建输出的⽂件

文件指纹

什么是文件指纹

打包后输出的⽂件名的后缀，文件指纹通常用来做文件版本管理，项目发布，有的文件修改了，文件指纹会修改，发布时只发布修改了的文件，没修改的可以不动。

文件指纹如何生成

Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改

注释：compile webpack启动那一次，会创建compile对象 complilelation每次代码发生变化，对象会发生变化，compilation发生变化，hash值也会发生变化 Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值

注释： chunk 模块，一个chunk对应一个entry，不同chunk对应不同hash，某个页面变化，发布哪个

Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变（css文件）

JS的文件指纹设置

CSS的文件指纹设置

图片的文件指纹设置

代码压缩

JS、HTML、CSS三个压缩，字节变小，返回变快

JS文件压缩

内置了uglifyjs-webpack-plugin,也可以手动加

CSS文件压缩

css-loader在1.0版本后去掉了压缩参数，需要用下图插件及预处理器cssnano

html文件的压缩

以上第二章整体代码：gitee.com/geektime-ge…

参考

极客时间程柳峰老师《玩转webpack》

《玩转Webpack》学习笔记 Day3之第二章