这是我参与「第四届青训营」笔记创作活动的第12天

什么是 Webpack

定义： 本质上是一种前端资源编译、打包工具

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、 Less、Sass
支持模块化处理css、图片等资源文件
支持 HMR＋开发服务器
支持持续监听、持续构建支持代码分离
支持 Tree-shaking
支持Sourcemap

使用Webpack

使用

1.安装 2.编辑配置文件 3.执行编译命令打包后文件

核心流程

总结：webpack实际上主要做了两件事情——模块化+一致性

多个文件资源合并成一个，减少http请求数
支持模块化开发（import、export对不同类型资源的管理）
支持高级js特性
支持Typescript、CoffeeScript方言
统一图片、css、字体等其他资源的处理模型

配置

关于Webpack的使用方法,基本都围绕“配置”展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

使用Webpack——处理CSS

1.安装Loader 2.添加module处理css文件

使用Webpack——接入Babel

babel作用：把高版本的代码转换成低版本的代码，已达到兼容目的。文件结构： 1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口output

3.执行npx webpack

使用Webpack——生成HTML

文件结构：

.
|——src
|   ﹂index.js
|——webpack.config.js

1.安装依赖

npm i -D html-webpack-pligin

2.声明产物出口output

const path = require('path') 
const HTMLWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
    entry: './src/index', 
    output: { 
          filename: '[name].js', 
        path: path.join(__dirname, './dist') 
    }, 
    plugins: [new HTMLWebpackPlugin()]
}

3.执行npx webpack

运行结果：

使用Webpack——HMR (模块热替换)

可以使我们写的代码不用刷新，就能立刻把最新结果更新到浏览器中

1.开启HMR

const path = require('path') 
const HTMLWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
    entry: './src/index', 
    mode: 'development', 
    devtool: false, 
    watch: true  //结果立刻呈现
    devServer: {
        hot: true, // 核心配置项 
        open: true 
    }, 
    output: {
        filename: '[name].js', 
        path: path.join(__dirname, './dist')
    },
    module: { 
        rules: [{ test: /.css$/, use: ['style-loader', 'css-loader'] 
        }] 
    }, 
    plugins: [new HTMLWebpackPlugin()], 
}

2.启动Webpack

npx webpack serve

使用Webpack——Tree-Shaking

Tree-Shaking作用：删掉没有用到的代码，对工具类库如Lodash有奇效。

webpack工具线

理解Loader

三、理解Loader

作用：

为了处理非标准JS资源，设计出资源翻译模块
用于将非js资源翻译为标准的js资源

特性：

链式执行
支持异步执行
分 normal、pitch 两种模式

常见Loader

理解插件

什么是插件？为什么需要这么设计？

很多的知名工具都是所谓“插件”架构的 eg：

VScode、Webstorm、Chrome、Firefox
Babel、Webpack、Rollup、Eslint
Vue、Redux、Quill、Axios

如果没有使用“插件”架构，对于一个项目而言是不好的，缺点如下：

新人需要了解整个流程细节，上手成本高
功能迭代成本高，牵一发动全身
功能僵化，作为开源项目而言缺乏成长性
Blaba

总结：

心智成本高
可维护性低
缺少生命力

插件构架精髓：是对扩展开放，对修改封闭的一种思维

如何写插件

写一个插件最需要关注以三个参数：

时机：compier.hooks.compilation——钩子在何时触发
参数：compilation等
交互：dependencyFactories.set——在钩子回调中如何和webpack其他上下文内容进行交互

钩子的核心信息：

时机： 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情
上下文： 通过 tapable 提供的回调机制，以参数方式传递上下文信息
交互： 在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变

DAY12 Webpack知识体系 | 青训营笔记