字节青训前端笔记 | Webpack入门

最新推荐文章于 2024-07-17 22:26:57 发布
最新推荐文章于 2024-07-17 22:26:57 发布
阅读量1.7k 收藏 5
点赞数 2
分类专栏： 字节跳动青训营笔记 文章标签： webpack 前端 javascript 前端工程化 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46463785/article/details/128755233
版权

本节课将重点围绕「 Webpack 」这一核心话题展开。简述前端工程化的常用工具webpack 的原理和使用

webpack的作用

webpack的作用是把很多文件打包整合到一起, 缩小项目体积, 提高加载速度，常用的场景是：

  • 代码压缩

将JS、CSS代码混淆压缩，让代码体积更小，加载更快

  • 编译语法

编写CSS时使用Less、Sass，编写 JS 时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。

  • 处理模块化：

CSS 和 JS 的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。

开始使用 webpack

首先需要使用 node 安装 webpack

npm install webpack
npm install webpack-cli

我们可以通过 webpack 命令将一个文件进行打包，webpack 会根据模块的依赖关系进行静态分析，相互依赖的各个模块都会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。

npx webpack a.js bundle.js

之后创建一个 webpack 的配置文件 webpack.config.js ，在其中我们可以进行打包的配置，webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。以下是常用的配置说明：

// webpack 中引入其他的模块要使用commonJS模块化require导入，因为webpack是nodeJS 开发的，不能使用 import导入
var webpack = require('webpack');
const { resolve } = require('path');
module.exports = {
    //entry可以是个字符串或数组或者是对象。当entry是个字符串的时候，用来定义入口文件
    entry: './js/app.js',
    //output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    //基础目录，绝对路径，用于从配置中解析入口点(entry point)和 加载器(loader)。默认使用当前目录，但是推荐在配置中传入一个值
    context:resolve(__dirname, './'),
    //关于模块的加载相关，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器
  	module: {
       {
        // 正则: 匹配所有以css结尾的文件
        test: /\.css$/,
        // 使用的加载器，加载器处理顺序：从右往左
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader', 
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            //配置项目
            options: {
              limit: 8 * 1024,
              // 配置输出的文件名
              name: '[name].[ext]',
              // 配置静态资源的引用路径
              publicPath: "../images/",
              // 配置输出的文件目录
              outputPath: "images/"
            }
          }
        ]
      },
      // (4) 配置对于高版本js的兼容性处理
      {
        test: /\.js$/,
        // 配置排除项
        exclude: /(node_modules)/,
        use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      ]
 	},
    //Webpack社区提供了一个便捷的本地开发工具webpack-dev-server,在webpack.config.js文件添加devServer对象，是专门用于存放webpack-dev-server配置的,当webpack-dev-server发现工程源文件进行了更新操作就会自动刷新浏览器，展示更新后的内容
    devServer: {
    	hot: true,
    	// 自动打开浏览器
    	open: true
    }
    //webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀，如下的配置我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了。
    resolve:{
        extensions:['','.js','.json']
    },
    //插件，用于完成一些 loader 不能完成的工作
    plugins: [
        new webpack.NoErrorsPlugin()
    ]，
    mode: 'development', //生产环境
     // mode:'production,'//开发环境
};

webpack的运行流程

webpack是运行流程如下：

  1. 入口处理：从编写的 entry 开始，启动我们的编译流程
  2. 依赖解析：根据文件的 require 和 import 的情况，找到文件依赖的资源
  3. 资源解析：根据module的配置，将资源用不同的解析器进行处理，转成标准的内容
  4. 资源合并：将转译后的内容合并打包并且在我们 output 指定的文件中输出

使用webpack的详解

webpack的使用就是书写配置文件，使用我们要详细的去学如何去配置我们的 webpack.config.js 文件，他有多种的属性：
请添加图片描述

  • entry 和 output

entry 用于定于一次打包的入口文件，也就是从哪个文件开始打包

output 参数是个对象，用于定义构建后的文件的输出。其中包含path和filename，代表了输出路径和输出文件名称

	entry: './js/app.js',
    output: {
        path: './build',
        filename: 'bundle.js'
    },
  • module

webpack只能匹配优先类型的前端文件，比如 .css 。如果我们需要引入其他类型的文件，比如 .less 文件，我们需要通过加载器来处理它们，module就是做这个事情的，它通过rules定义一个对象数组，每一项通过 test 定义正则表达式去匹配不同后缀的文件名，然后通过 use 给它们定义不同的加载器，部分加载器可能需要你配置参数，你可以在 options 字段进行配置，exclude 则可以排除指定目录下的文件，使得他们不使用加载器进行加载，以下的例子是几种常见的配置，css 的解析，less 的解析，图片的解析，babel的配置：

  	module: {
       {
        // 正则: 匹配所有以css结尾的文件
        test: /\.css$/,
        // 使用的加载器，加载器处理顺序：从右往左
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader', 
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            //配置项目
            options: {
              limit: 8 * 1024,
              // 配置输出的文件名
              name: '[name].[ext]',
              // 配置静态资源的引用路径
              publicPath: "../images/",
              // 配置输出的文件目录
              outputPath: "images/"
            }
          }
        ]
      },
      //  配置对于高版本js的兼容性处理
      {
        test: /\.js$/,
        // 配置排除项
        exclude: /(node_modules)/,
        use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      ]
 	},
  • plugins

有一些 loader 不能完成的工作，我们需要导入一些插件来完成这些工作，比如自动生成一个html 文件，需要一个插件，我们这样导入

//在顶部引入
const HTMLWebpackPlugin = require('html-webpack-plugin')
//....省略代码
module.exports = {
    //....
	plugins: [
        new HTMLWebpackPlugin()
 	]，
}
  • devServer

devServer 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器，你只需要下载相关的库，并且配置devServer 项就可以使用它，其中的 hot 是否开启热更新，就是就是你修改代码保存之后，浏览器不会刷新，只会修改你更改过的依赖代码。

    devServer: {
        //热更新
    	hot: true,
    	// 自动打开浏览器
    	open: true
    }

当然当你配置了热更新之后，你需要使用不一样的命令来执行打包

npx webpack server
  • watch

这个属性说明了是否开启 webpack 的监听功能，设置为 true 后，每次按保存键，webpack自动为我们打包，我们可以通过 watchOptions 来进行 watch 的配置

    watch:true
	watchOptions:{
    	poll:1000,//监测修改的时间(ms)
    	aggregeateTimeout:500, //防止重复按键，500毫米内算按键一次
    	ignored:/node_modules/,//不监测
	}
  • devtool

配置webpack的调试工具，一共有20多种可以选择，具体可以查看官网的文档，https://webpack.js.org/

合理的配置可以有效的实现Source Map

    devtool:"eval-source-map"
  • mode

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

  1. development，会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
  2. 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

区别简单的来说就是：production 会移除一些没有依赖的方法、变量和文件，并且代码会进行压缩，比development的文件小。

  • optimization

optimization主要用来自定义一些优化打包策略，主要有这些常用的值：

splitChunks：设置这个值会自动提取所有公共模块到单独bundle中去

minimize：表示是不是压缩模块

minimizer：属性存放一个数组，数组里可以存放用于代码压缩的插件

usedExports： 表示是不是只导出那些外部使用了的那些成员

concatenateModules：表示是不是合并模块，因为打包默认会把很多模块放进一个单独的函数中，如果模块很多的话，那么输出文件就会有很多这种模块函数

sideEffect：这个新特性可以让我们来标识我们的代码有没有副作用。但是有些模块的导入虽然没有使用，但是外部可能会继承自他们，或者有有些简介的联系，sideEffects 就可以标记这些模块，告诉javascript哪些没有副作用，可以去掉，哪些有副作用不可以去掉

optimization: {
    splitChunks: {
      // 自动提取所有公共模块到单独 bundle
      chunks: 'all'
    },
    // 表示只导出那些外部使用了的那些成员
    usedExports: true,
    // 压缩模块
    minimize:true,
    minimizer:[
   		 new TerserPlugin(),
   		 new OptimizeCssAssetsWebpackPlugin()
    ],
    concatenateModules:true,
    sideEffect: true
},

理解 Loader

loader 主要的作用的内容转换，因为 webpack 只认识 js 代码，loader要做的就是把非 js 的资源转换成 js 的资源，css 是链式调用的，比如 less 的解析需要用到如下三个 loader，他们是按照顺序分别执行的：

请添加图片描述

loader 的执行分为 pitch 和 normol 两个阶段，前者是从数组第一个向后执行，而后者是从最后一个向前执行，loader 会先执行 pitch，然后获取资源再执行 normal loader，但是如果 pitch 有返回值时，就不会走之后的 loader，并将返回值返回给之前的 loader。

因此，数组的第一个 loader 要返回 js 脚本，也就是最后要输出给webpack的内容；每个 loader 只做一件事，为了使 loader 在更多的场景中链式调用；每一个 loader 都是一个模块；每个 loader 都是无状态的，确保 loader 在不同的模块转换之间保存状态。
如果想要学会自己写一个 loader 可以查看 https://mp.weixin.qq.com/s/TPWcB4MfVrTgFtVxsShNFA

以下是常见的 loader:
请添加图片描述

理解插件

插件架构可以提升工具的拓展性：webpack的原理和底层是非常复杂的，新人需要了解整个流程成本很高，迭代成本很高，牵一发动全身，并且作为开源项目缺乏成长性，参与它很难。插件的精髓是，对外开放拓展，对修改封闭，我只实现核心的功能，其他的功能都由插件生态来共建和实现

webpack的实现原理是：Webpack 编译阶段会为各个编译对象初始化不同的 Hook ，开发者可以在自己编写的 Plugin 中监听到这些 Hook ，在打包的某个特定时间段触发对应 Hook 注入特定的逻辑从而实现自己的行为。

webpack上有两个很重要的对象：

  1. compiler 对象中保存着完整的 Webpack 环境配置，它通过 CLI 或 者 Node API传递的所有选项创建出一个 compilation 实例。这个对象会在首次启动 Webpack 时创建，我们可以通过 compiler 对象上访问到 Webapck 的主环境配置，比如 loader 、 plugin 等等配置信息
  2. compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖，在 compilation 对象中我们可以获取/操作本次编译当前模块资源、编译生成资源、变化的文件以及被跟踪的状态信息，同样 compilation 也基于 tapable 拓展了不同时机的 Hook 回调

Plugin 的原型对象上需要存在一个 apply 方法，当 webpack 创建 compiler 对象时会调用各个插件实例上的 apply 方法并且传入 compiler 对象作为参数。同时需要指定一个绑定在 compiler 对象上的 Hook ， 在 Hook 的回调中处理插件自身的逻辑，根据 Hook 的种类，在完成逻辑后通知 webpack 继续进行

Webpack Plugin 的核心机制就是基于 tapable 产生的发布订阅者模式，在不同的周期触发不同的 Hook 从而影响最终的打包结果。

想要详细了解的自行查阅一些资料，比如:

https://blog.csdn.net/gogo2027/article/details/127750064?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-127750064-blog-125101031.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.1&utm_relevant_index=3

摸鱼老萌新
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
前端路由&webpack基础配置详解
10-16
主要介绍了前端路由&webpack基础配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入了解Webpack：特性、特点和结合JS混淆加密的实例
mxd01848的博客
08-26 1661
Webpack是一个功能强大的前端构建工具，具备模块化管理、加载器、插件、代码优化等一系列特性。通过结合Webpack和JS混淆加密，我们可以保护代码的安全性，同时优化资源文件，提升Web应用程序的性能和用户体验。每个模块都有自己的依赖关系，Webpack能够自动解析这些依赖，从而构建出一个整体的资源文件。HMR是Webpack的一个强大特性，它允许在开发过程中实时更新模块，无需刷新整个页面。Webpack可以通过压缩、混淆和代码分割来优化资源文件，减小文件大小，提高加载速度。
TerserWebpackPlugin详解
高山景行，一尘不染
02-01 4913
TerserWebpackPlugin，此文章来自于github翻译来，仅供参考，具体配置需要结合自己的技术框架配置（vue/react等）
字节青训前端笔记 | Vite 入门
weixin_46463785的博客
01-24 1330
本节课，讲师将前置介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端构建工具的 Vite 是什么及其在开发过程中的应用。
JQuery入门，2024年最新前端面试题webpack
m0_60666921的博客
04-21 584
重点1：$ (): 调用方法$ ()---->叫做jquery的核心函数,为$ ()方法传入一个function() {} 作为参数，就相当于window.οnlοad=function(){写代码}重点2：使用$ {}查找元素，使用.click()来绑定点击响应函数，把单击响应函数作为click()的参数传入即可。2.传入参数html字符串时，根据这个字符串创建元素节点对象----apppendTo方法。4.传入参数为DOM对象时，将DOM对象包装成JQuery对象返回。
Webpack入门笔记
Admin_Lian的博客
07-03 256
目录(一) Webpack 概述(一) Webpack 基本使用1. node 安装2. Webpack 安装3. webpack 简单使用 (一) Webpack 概述 Webpack: 是一个现代的JavaScript应用的静态模块打包器, 这是Webpack官方的解释.在这句话中提到两个关键字: 模块: 在JavaScript发展初期就是为了实现简单的页面交互逻辑, 但随着前端技术不断更新、迭代, CPU、浏览器性能得到了极大的提升, 导致前端页面逻辑复杂, 代码日益膨胀. 此时就会考虑使用模块化
Webpack入门与基础使用
m0_56369204的博客
12-27 89
本文是我学习Webpack中所做笔记，可供快速入门和查阅使用，详细学习推荐黑马程序员的vue学习。
【学习笔记】Webpack4和单页应用入门
qq_26780317的博客
10-20 283
背景： 前端打包的历史     在很长的一段前端历史里，是没有打包的。那个时候页面基本是纯静态的或者服务端输出的，没有 AJAX，也没有 jQuery。     随后，人们开始尝试在一个页面里做更多的事情。随着XMLHttpRequest, 也就是我们俗称的 AJAX, 这是一个使用方便的，兼容性良好的服务器通信接口。从此开始，我们的页面开始玩出各种花来了，前端一下子出现了各种各样的库，Prototype、Dojo、MooToo
webpack入门4----优化环境配置（下），字节面试官不开摄像头
2301_76268112的博客
04-18 297
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
《Webpack》彻底入门Webpack（二），前端开发实习面试题
m0_55956883的博客
04-18 331
代码分割的目的为了减少加载代码大小和提取公共资源，减少加载次数做的优化；比如，多页面项目中，a页面和b页面都引入了jq，那么正常情况下，jq会被打包2次，这显然是不合理，jq只需要单独提取出来后打包一次就够了，没有必要混入在a，b中被打包两次；，关于这个功能，具体可以查看官网核心功能optimization介绍，或者核心功能optimization介绍；注意，版本差异：webpack3中使用：commonChunksPlugin，而在webpack4中使用。
Python库 | webpack-s3-2019.8.30.tar.gz
04-19
资源分类：Python库 所属语言：Python 资源全名：webpack-s3-2019.8.30.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
笔记-webpack5学习指南-V1.0
08-29
笔记-webpack5学习指南-V1.0
前端面试题之webpack相关题集.zip
06-21
在前端开发中，Webpack 把应用中的各种资源（如 JavaScript、CSS、图片等）视为“模块”，并进行编译和打包，使其能在浏览器环境中运行。这个压缩包文件“前端面试题之webpack相关题集.zip”显然包含了针对 Webpack ...
Webpack详解
最新发布
警警的博客
07-17 1690
Webpack 是一个现代 JavaScript 应用程序的。它允许开发者将项目中的资源（如 JavaScript、CSS、图片等）视为，通过这些模块之间的，将它们成一个或多个 bundle（捆绑包），这些 bundle 可以在浏览器中加载和执行。Webpack 提高了开发效率，简化了前端项目的构建流程，是现代前端开发不可或缺的工具之一。
webpack生产环境下的配置
web
07-16 425
在入口文件(src/index.js)引入@babel/polyfill。在入口文件引入 @babel/polyfill。根配置，配置eslint标准。方案2和方案三选一种即可。
Node 20 + React 18 + Babel 7 + Webpack 5 开发环境搭建
wwwmewww的专栏
07-11 833
【代码】React 18 + Babel 7 + Webpack 5 开发环境搭建。
webpack优化
web
07-16 521
**
Webpack入门与配置详解：前端模块打包利器
Webpack是一个强大的前端自动化构建工具，专为现代JavaScript应用程序提供模块打包、代码压缩和优化功能。它主要用于前端框架如Vue和React等项目的构建过程中，旨在简化代码管理和资源加载，提升性能。Webpack的核心...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摸鱼老萌新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值