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

1.概览

1.1 什么是webpack？

webpack是一款代码编译工具，可以帮我们管理项目中各种资源, 将其打包成一个Bundle,主要功能有：

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

1.2 为什么要使用webpack?

在打包工具出现之前

依赖手工，比如有50个JS文件...操作，过程繁琐
动当代码文件之间有依赖的时候，就得严格按依赖顺序书写
的开发与生产环境一致,难以接入TS 或JS 新特性
比较难接入Less、Sass 等工具
JS、图片、cSS资源管理模型不一致

2.使用Webpack

2.1 开始

安装

npm i -D webpack webpack-cli

新建配置文件webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',    // 打包入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),   // 输出目录
    filename: 'bundle.js',   // 输出文件名
  },
}

执行命令

npx webpack

2.2 webpack核心流程

入口处理

从entry文件开始，启动编译流程

依赖解析

从entry文件开始，根据require or import 等语句找到依赖资源

3.资源解析

根据module配置，调用资源转移器，将png、用资源转移器，将png、用资源转移器，将png、

4.资源合并打包

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

递归调用2->3，直导所有资源处理完毕

2.3 webpack 常用配置

按使用频率：

entry/output
module/plugins
mode
watch/devServer/devtool

详情参考:webpack官方文档

QQ截图20230209230607.png

2.4 使用loader

在配置文件中添加使用css-loader：

module: {
 rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      ]
 }

常用的loader:

QQ截图20230209230305.png

Webpack | 青训营笔记