《构建 Webpack 知识体系》课堂笔记 | 青训营

用户9523518455837
98 阅读1分钟

第十二节课《构建 Webpack 知识体系》，也是最后一节课，本节课分为两小节，分别是Webpack 定义解析与Webpack使用方法。

Webpack 定义解析

  • 为什么要学习Webpack?

    • 理解前端“工程化”概念、工具、目标
    • 某种程度上提高个人核心竞争力
    • 高阶前端的必经之路

  • 什么是Webpack

webpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，本质上是一种前端资源编译、打包工具，是目前最为流行的JavaScript打包工具之一。 webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图(dependency graph)，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

  • Webpack的优势

3.jpg

Webpack 使用方法

  • 使用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: {// 定义一些loader相关的内容，可在下文看到
        rules: [{
            test: /.less$/i,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}

entry是打包的入口文件，mode则是打包模式，一般会有开发环境和生产环境的区别，output则是出口文件，用于指定文件打包后的位置.

3.执行编译命令

npx webpack

  • 核心流程——极度简化版

  1. 入口处理——从entry文件开始，启动编译流程；
  2. 依赖解析——从entry文件开始，根据require or import等语句找到依赖资源；
  3. 资源解析——根据module配置，调用资源转移器，将png、css等非标准js资源转译成js内容；
  4. 资源合并打包——将转译后的资源内容合并打包为可直接在浏览器运行的js文件。 [递归调用2、3，直到所有资源处理完毕]

  • 模块化——一致性

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

怎么使用Webpack

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

  • 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项

  • 工具类：主流程之外，提供更多工程化能力的配置项 #配置总览 按使用频率：

    -entry/output

    -module/plugins

    -mode

    -watch/devServer/dectool

5.png

  • 处理js文件

  • 处理css文件

  1. 安装loader
npm add -D css-loader style-loader
  1. 添加module处理CSS文件
const path = require("path")

module.exports = {
    entry: "./src/index",
    mode: "development",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    },
    module: {
        //css处理器
        rules: [{
            test: /\.css/i,
            use: ["style-loader", "css-loader"]
        }]
    }
}

  • 使用Webpack——接入Babel

    • 安装依赖
    • 声明入口 entry& 产物出口output
    • 添加module处理css文件

  • 使用Webpack——生成HTML

    • 安装依赖
    • 配置
    • 执行npx webpack

使用 Webpack - 工具线

  • 使用Webpack——HMR

Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上~）

  1. 开启HMR
module.export = {
    //...
    devServer:{
        hot:true
    }
};
  1. 启动webpack
    [npx webpack serve]

  • 使用Webpack——Tree-Shaking

Tree-Shaking -树摇，用于删除Dead Code

Dead Code

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写

  • 理解Loader

Loader核心功能：将非JS资源转换为JS资源

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

认识Loader：

  • 链式调用 less-loader: 实现less => css的转换
  • css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符合JavaScript 语法
  • style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
avatar
文章
阅读
粉丝