webpack初了解 | 青训营笔记

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

为什么要webpack

非常复杂的东西

0. 前端工程化的概念、工具、目标
1. 个人的核心竞争力
2. 高阶前端的必经之路

什么是webpack

0. 前端是由一大堆文件组成的：js、css、html、字体、图片……

1. 古早时代里，依赖手工、需要按照依赖顺序书写、难以接入TS或者JS、难以接入Less、Sass，资源管理模型不统一

2. 让我想到了我的p5js……好像就是这样的

3. 前端资源编译、打包工具：

   0. 多份资源打包成一个bundle

   1. 支持Babel、Eslint、TS、coffeScript、Less、Sass

   2. 支持模块化处理CSS、图片等资源

   3. 支持HMR+开发服务器

   4. 支持持续监听、持续构建

   5. 支持代码分离

      ……

工程化工具：gulp、webpack、rollup、vite

使用webpack

基础步骤：

0. 安装webpack
1. 编辑配置文件
2. 打包

配置文件：

存在一个entry与一个output

非常复杂，以至于为人诟病

核心流程：

0. 入口处理：从entry文件开始编译流程
1. 依赖解析：从entry开始，根据require与import找到依赖源
2. 资源解析：根据module配置，调用资源转译器，将png、css等非JS资源转译为JS内容
3. 资源合并打包：将转译后的资源合并打包为js文件

特性：

0. 模块化
1. 一致性

案例

• 流程配置：作用于流程的某个or若干个环境、直接影响打包效果的配置项
• 工具配置：主流程外，提供更多工程化能力的配置项

0. 流程：

   0. 输入： entry、context
   1. 模块解析： resolve、externals
   2. 模块转译： module
   3. 后处理： optimization、mode、target

1. 工具

   0. 开发效率类：watch、devtools
   1. 性能优化类： cache、performance
   2. 日志类： stats、infrastructureLogging

流程向

0. 接入babel

   const path = require('path')
   ​
   module.exports = {
     entry: './src/index',
     output: {
       path: path.join(__dirname, './dist'),
       filename: '[name].js'
     },
     module: {
         rules:[{
             test: /.js?$/,
             use:[{
                 loader: 'babel-loader',
                 options: {
                     presets:[
                         [
                             '@babel/preset-env'
                         ]
                     ]
                 }
             }]
         }]
     }
   }
   

1. 接入CSS

2. 接入HTML

工具向

0. HMR
1. fada

loader

webpack只认js

所以需要使用loader来解决这个问题

链式调用：

• less-loader

• css-loader

• style-loader

总结：

前端作为一个诸多交叉的领域，是需要一个强有力的工程化工具来提高生产效率，而webpack，就担任了这个角色