Webpack 知识体系 | 青训营笔记

Glitter
58 阅读2分钟

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

为什么使用Webpack

前端项目由资源组成，在传统的方式中，我们依赖手工管理。
手工管理的缺点体现在：

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

这些对开发效率有很大的影响，在之后不断的发展中，出现了Webpack对前端资源就行管理。

什么是Webpack

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

  • 多份资源文件打包成一个Bundle
  • 支持Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理CSS、图片等资源文件
  • 支持HMR+开发服务器(Hot Module Replacement--模块热替换)
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking(树摇--用于删除无用代码)
  • 支持Sourcemap(源代码和生成代码的映射)
  • ...

如何使用Webpack

简单示例

  1. 安装 npm i -D webpack webpack-cli
  2. 编辑配置文件webpack.config.js
module.exports = {
  entry: 'main.js',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
}
  • less-loader：实现less到css的转换
  • css-loader：将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
  • style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
  1. 执行编译命令 npx webpack

核心流程

  1. 入口处理--从entry文件开始，启动编译流程

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

  3. 资源解析--根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

    递归调用2、3，知道所有资源处理完毕

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

特性：模块化+一致性

  • 多个文件资源合并成一个，减少http请求数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持Typescript、CoffeeScript方言
  • 统一图片、CSS、字体等其它资源的处理模型
  • Etc...

Webpack配置

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

  • 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
    1. entry--输入：entry``context
    2. require``import--模块解析：resolve``externals
    3. module--模块转译：module
    4. output--后处理：optimization``mode``target
  • 工具类：主流程外，提供更多工程化能力的配置项
    1. 开发效率类 watch、devtool、devServer
    2. 性能优化类 cache、performance
    3. 日志类 stats、infrastructureLogging
    4. 其它 amd、bail等

引用参考

Webpack 知识体系.pptx

avatar
文章
阅读
粉丝