Webpack | 青训营笔记

2023-02-15 34 阅读2分钟

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

什么是Webpack

前端项目由资源构成，如果手动管理会非常繁琐

Webpack本质上是一种前端资源编译、打包工具。将各种文件编译成js,css,jpg,png文件

Webpack的使用

安装
```
npm i -D webpack webpack-cli
```

编辑配置文件

module.exports={
    entry: 'main.js',
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    },
    module: {
        rules:[{
            test: /.less$/i,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}

编译
```
npx webpack
```

核心流程

入口处理

从entry文件开始，启动编译流程
依赖解析

从entry文件开始，根据requireorimport等语句找到依赖资源
资源解析

根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

使用Webpack

流程配置：作用于流程中某个or若干个环节，直接影响打包效果的配置项
1. 输入：entry; context
2. 模块解析：resolve; externals
3. 模块转译：module
4. 后处理：optimization; mode; target
工具配置：主流程之外，提供更多工程化能力的配置项

CSS处理

安装Loader
添加module处理CSS文件

Babel

安装依赖
声明产物出口
执行npx webpack

生成HTML

安装依赖
声明产物出口
执行npx webpack

HMR（Hot Module Replacement）模块热替换

开启HMR：

module.exports={
    // ...
    devServer:{
        hot:true
    }
}

执行npx webpack

Tree-Shaking

用于删除Dead Code

Dead Code：

代码没有被用到或不可到达
代码的执行结果不会被用到
代码只读不写
......
模块导出了但未被其他模块使用

开启tree-shaking：

module.exports={
    // ...
    mode: "production",
    optimization:{
        usedExport: true
    }
}

理解Loader

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

特性：

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

理解插件

插件围绕钩子展开

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