首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Webpack笔记

Webpack笔记

作者头像
赤蓝紫
发布于 2023-01-02 08:30:37
发布于 2023-01-02 08:30:37
39300
代码可运行
举报
文章被收录于专栏:clzclz
运行总次数:0
代码可运行

Webpack 笔记

参加字节跳动的青训营时写的笔记。这部分是范文杰老师讲的课。

插一嘴:范文杰老师的公众号Tecvan有很多干活,可以关注一下。(下面的部分有好多都有很有用的扩展链接,偷懒,就直接把老师的公众号贴出来)

1. 简介

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

功能:

  • 多份资源文件打包成一个 Bundle
  • 支持 Less、Babel、Eslint、TypeScript
  • 支持模块化处理 css、图片等资源文件
  • 支持 HMR(热更新)
  • 支持 Tree-shaking
  • 支持 SourceMap
  • ,,,

2. 使用 Webpack

2.1 使用步骤

安装, npm install webpack webpack-cli -D

编辑配置文件(webpack.config.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
};

执行编译命令, npx webpack

2.2 核心流程

  1. 入口处理:从入口文件开始启动编译流程
  2. 依赖解析:根据 require import等语句找到依赖资源
  3. 资源解析:根据 module配置,调用资源加载器,把 css、less、png 等非标准 JS 资源转译成 JS 内容(Webpack 只认识 JS)
  4. 资源合并打包:将转译后的资源合并打包为可以直接在浏览器运行的 JS 文件,包括代码混淆、代码压缩等操作。

递归调用 2、3,直到所有资源处理完毕。因为依赖资源可能也会依赖其他资源。

2.3 分类

Webpack 的使用基本都围绕配置展开,而配置大致可分为两类:

  • 流程类:作用于流程中,直接影响打包效果的配置项
  • 工具类:主流程之外,提供更多工程化能力的配置项

2.4 练习

2.4.1 简单使用

模块在上一层。(为了不影响观感)

  1. 编写代码

编辑 webpack 配置文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
};

执行 npx webpack

2.4.2 处理 CSS

按 2.4.1 的步骤直接执行,会发现出错

原因:Webpack 只认识 JS,所以需要使用 Loader 将对应非 JS 资源转译成 JS

安装 Loader

npm install css-loader style-loader -D

添加 module,使用 Loader 处理 CSS 文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

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

执行 npx webpack,成功

2.4.3 使用 Babel

Babel 用于将使用 ES6 语法编写的 JS 代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

安装依赖。

npm install @babel/core @babel/preset-env babel-loader

配置。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env"]],
            },
          },
        ],
      },
    ],
  },
};

npx webpack

源代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let add = (a, b) => a + b;

转换后的

2.4.4 生成 HTML

安装依赖

npm install html-webpack-plugin -D

配置。因为这个不是 loader,而是 plugin(插件),所以配置需要引入插件,然后在 plugins中实例化插件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  plugins: [new HtmlWebpackPlugin()],
};

npx webpack

2.4.5 HMR(热更新)

热更新简单来说就是可以在应用运行的时候,不需要刷新页面,就可以实时查看到修改的效果

  1. 安装依赖 npm install webpack-dev-server -D
  2. 开启 HMR
  1. 启动 Webpack

npx webpack serve

2.4.6 Tree-Shaking

Tree-shaking:树摇,用于删除 Dead Code

Dead Code:

  • 代码没有被用到
  • 代码只读不写

Dead Code 例子:

没有使用 Tree-Shaking 时:

修改配置文件,开启 Tree-Shaking:

结果:

2.5 更多功能

3. Loader

作用:将资源转译成标准 JS。(因为 Webpack 只认识 JS)

3.1 Loader 使用示例

使用 Loader(处理 less):

安装 Loader

npm install style-loader css-loader less-loader -D

添加 module处理

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "development",
  output: {
    filename: "bundle.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.eports = “${css}”的形式,符合 JS 的语法(直截了当来说的话,就是把 css 用 js 表示)
  • style-loader:将 css 模块包进 require 语句,并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签

3.2 Loader 其他特性

  • 链式执行(过程的输出刚好是下一个过程的输入)
  • 支持异步执行
  • 分 normal、pitch 两种模式(这部分没有什么概念)

3.3 编写简单 Loader

3.3.1 Loader 形式
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = function (source, sourceMap?, data?) {
  // ?代表参数可有可无
  // source是loader的输入。可能是文件内容或上一个loader处理的结果

  // ......

  return source; // 此时的source是指经loader处理后的source(不处理则是原来的source,如eslint-loader)
};

3.3.2 开始动手

目录结构

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let t1 = "Hello";

自编简单 loader

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = function (source) {
  console.log(source);
  source += ` let t2 = ' World';
              console.log(t1 + t2);`;
  return source;
};

配置文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  mode: "production",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: path.join(__dirname, "loader", "myloader.js"),
      },
    ],
  },
};

3.4 常见 Loader

4. Plugin(插件)

使用如 2.4.4 所示

写插件,暂时无能为力,先把课件上的干货放出来(方便以后查看)

5. 更多

在老师的公众号可能没有的(老师分享的)

Awesome Webpack4+ 优秀学习资源

深入浅出 Webpack

Webpack 5 知识体系

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【前端技术】Webpack基础
Webpack 是一个打包模块化 JavaScript 的工具,在 Webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。其官网的首页图很形象的画出了 Webpack 是什么,如下:
演化计算与人工智能
2022/01/24
8180
【前端技术】Webpack基础
webpack 基础知识整理
webpack是一个 模块打包工具,支持所有的打包语法,比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的,发展到现在,已经可以打包很多种文件类型,比如 css、img 。
神葳
2021/01/22
1.4K0
webpack面试题
webpack打包原理 1、把一切都视为模块:不管是 CSS、JS、Image 还是 HTML 都可以互相引用,通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loader 和 plugins 处理,然后打包在一起。 2、按需加载:打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks,还可以将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载 3、webpack.config.js的配置
用户10106350
2022/10/28
6820
前端工程化之Webpack优化
好久没更文了,其实这段时间,一直没闲着。在准备一些比较重要的东西。忙着跑步,忙着学习,忙着xx。 总之就是,一直在忙着,从未停歇。
前端柒八九
2022/09/16
1.3K2
webpack4 入门
源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3
lilugirl
2019/10/08
5810
前端工程化与webpack
前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。最终落实到细节上,就是实现前端的“4 个现代化”: 模块化、组件化、规范化、自动化
岳泽以
2022/10/26
7060
前端工程化与webpack
webpack 入门教程
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
老马
2018/08/20
4.3K0
webpack 入门教程
Webpack——从基础使用到手动实现(万字长文)
这个其实不用多说了,如今的前端项目哪里还有用不到打包工具的呢,而webpack又作为打包工具中的王者我们又有什么理由不去搞明白它呢。
coder_koala
2020/07/15
1.1K0
Webpack——从基础使用到手动实现(万字长文)
Webpack模块打包器
通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
乐心湖
2021/01/27
7670
Webpack模块打包器
前端工程化 - webpack 基础
默认配置文件 webpack.config.js,可以通过 webpack --config 指定配置文件
Cellinlab
2023/05/17
3390
Webpack解析文件和资源
webpack解析css文件流程,首先通过css-loader 加载 .css ⽂件,并且转换成 commonjs 对象,然后通过style-loader 将样式通过<style>标签插入到head中。
越陌度阡
2023/01/03
6480
Webpack系列——快速入门
多文件入口 对entry采用对象写法,指定对应的键值对,为了输出这多个文件可以使用占位符
用户1515472
2019/07/24
7020
Webpack 使用详解
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。本文将详细介绍如何使用 Webpack,以及提供代码示例。为了保持篇幅,我们将简要介绍 Webpack 的核心概念和功能。
世间万物皆对象
2024/03/20
1970
webpack4实用配置指南-上手篇
算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感,比较捉急。工具用法的东西,好记性不如烂笔头,有必要系统梳理下webpack的配置常用配置以及构建优化。
elson
2018/06/19
4.9K0
webpack5快发布了,你还没用过4吗?
webpack5 预计会在 2020 年年初发布,之前从 alpha 版本就有关注,本次重点更新在长期缓存,tree shakking 和 es6 打包这块。具体变更可以参考https://github.com/webpack/changelog-v5/blob/master/README.md。
前端森林
2020/04/23
1.7K0
webpack5快发布了,你还没用过4吗?
从零开始搭建Vue工程
dist目录存放编译后的资源 src存放源码文件 运行命令 npm init -y
切图仔
2022/09/08
9130
从零开始搭建Vue工程
2022年开发者都在用的 Webpack 插件,你用上了吗
如果我们有合适的工具,开发就会变得更容易。在这篇文章中,我将讨论一些流行的webpack插件。
前端修罗场
2022/07/29
5470
2022年开发者都在用的 Webpack 插件,你用上了吗
四大维度解锁webpack3笔记
在命令行输入webpack -h,成功就出现下图,有很多webpack命令可以看一看
FinGet
2019/06/28
1.2K0
四大维度解锁webpack3笔记
webpack 4 入门
写这篇文章是为了让自己在自学 webpack 的过程中有所产出,于是边读 webpack 中文文档 边写下了这篇文章,里面的很多实例都是直接挪用的文档中的实例,但在一些概念的理解上我加入了自己的想法「未必精确」,所以读的时候要抱着「怀疑的态度」。
Ryoma
2022/04/02
8210
webpack快速构建项目
webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案。关于用webpack怎么构建项目,方法也是多种多样,五花八门。今天,我就写下我平常构建项目的方式,这个方式我觉得比较便捷和简单粗暴,如果有什么要指出的,也欢迎大家评论,毕竟我也只是一个前端新人。
守候i
2018/08/22
8910
webpack快速构建项目
相关推荐
【前端技术】Webpack基础
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档