第五届字节跳动青训营 前端进阶学习笔记(十)Webpack基础

news2024/11/13 9:04:19

文章目录

  • 前言
  • 什么是Webpack
      • 1.Webpack概述
      • 2.Webpack基本使用
  • Webpack打包核心流程
      • 1.webpack需要做的事情
      • 2.Webpack的使用
      • 3.处理CSS
      • 4.接入babel
      • 5.生成HTML
      • 6.HMR
      • 7.Tree-Shaking
  • Loader
      • 1.Loader的主要特性
      • 2.常见Loader
  • 总结

前言

课程重点:

  • 什么是Webpack
  • Webpack打包核心流程

什么是Webpack

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

1.Webpack概述

  • 多份资源文件打包成Bundle
  • 支持Babel、Eslint、TS、CoffeeScript、Less、Sass
  • 支持模块化处理css、图片等资源文件
  • 支持HMR + 开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持Sourcemap

2.Webpack基本使用

安装

npm i webpack webpack-cli -D

创建配置文件

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist'),
  },
};

目录结构:

image.png

执行编译命令

执行遍历命令之后,会在根目录下生成一个dist文件夹,里面包含了打包后的文件。

image.png

Webpack打包核心流程

image.png

1.webpack需要做的事情

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

2.Webpack的使用

image.png

基本使用

声明入口entry、声明出口output,运行npx webpack

image.png

3.处理CSS

安装loader

在配置webpack.config.js文件之前,需要先安装对于loader的依赖。

npm i css-loader style-loader -D

添加moudle处理css文件


const path = require('path');

module.exports = {
  entry: './src/main.js',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.css/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

运行

运行打包命令之后,就可以看到,引入的样式文件被编译进了js文件中。

image.png

4.接入babel

babel是一种使js代码能够兼容低版本浏览器的代码转译工具。

安装依赖

npm i @babel/core @babel/preset-env babel-loader -D

声明output

const path = require('path');

module.exports = {
  entry: './src/main.js',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.css/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
};

5.生成HTML

即项目打包之后生成的index.html文件

安装依赖

npm i html-webpack-plugin -D

修改配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist'),
  },
  plugins: [new HtmlWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.css/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
};

运行

image.png

6.HMR

热更新

安装依赖

npm i webpack-dev-server -D

开启HMR

module.exports = {
  // ...
  devServer: {
    hot: true,
  },
}

启动

npx webpack serve

7.Tree-Shaking

项目生产环境打包会将没有使用的代码删除。

开启Tree-Shaking

module.exports = {
  entry: './src/main.js',
  mode: 'production',
  devtool: false,
  optimization: {
    usedExports: true,
  },
}

Loader

因为webpack只能处理js文件,对于其他的非标准js资源,就需要对应的loader去讲资源翻译为标准js

1.Loader的主要特性

  • 链式执行
  • 异步执行
  • normal、pitch模式
    在这里插入图片描述

2.常见Loader

在这里插入图片描述

总结

本节课程对Webpack的历史和发展过程进行了介绍,主要说明了,为什么会有Webpack,它是做什么的,为什么选择它。随后对Webpack的一些基本应用进行了介绍和演示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/189173.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

本地启动打包后文件

本地启动打包后文件在 vs code 扩展中安装 Live Server配置 Live Server在 vs code 扩展中安装 Live Server 点击安装 Live Server 配置 Live Server VS Code setting.json 中配置 Vue/React 打包后文件夹 build/dist 为服务器的根目录 "liveServer.settings.root"…

AOP实例 – 环绕增强 日志记录

AOP实例 – 环绕增强 日志记录需求:记录图书的service层的日志操作,到数据库1. 创建商品日志记录表 Book_Log2. 完成日志记录表的插入逻辑3. 环绕增强搜集日志记录参数,并测试4. 环绕增强调用日志记录表的插入逻辑,完成日志记录功…

【目标检测论文解读复现NO.29】基于YOLO-ST的安全帽佩戴精确检测算法

前言此前出了目标改进算法专栏,但是对于应用于什么场景,需要什么改进方法对应与自己的应用场景有效果,并且多少改进点能发什么水平的文章,为解决大家的困惑,此系列文章旨在给大家解读最新目标检测算法论文,…

Spire.Barcode 5.1.0 for Java Patch

Spire.Barcode for Java是专门为开发人员设计的专业条码组件,用于在 Java 应用程序(J2SE 和 J2EE)上生成、读取和扫描 一维和二维条码。开发人员和程序员可以使用 Spire.Barcode 快速轻松地将企业级条码格式添加到他们的 Java 应用程序中。需…

【数字逻辑】逻辑函数式化简为其他形式

以 F(A,B,C)ABA‾CF(A,B,C) AB\overline{\rm A}CF(A,B,C)ABAC 为例,说明如何将与或式转换为其它类型的表达式。

CE认证和CCC认证区别?

CE认证和CCC认证区别? 参考链接:https://baijiahao.baidu.com/s?id=1728784934635704528&wfr=spider&for=pc CE认证和CCC认证有什么区别? 我发现我的很多朋友对此并不了解。 同时我发现很多产品在很多产品包装上都通过了CCC和CE认证,所以可能会引起没有做过产品…

硬件 -CPU工作原理

1.地址空间一个处理器能够访问(读写)的存储空间有限,我们称空间为地址空间,一般来说N位地址总线的处理器的地址空间是2的N次方。CPU从内存中取数据,先发地址,内存收到后,发送地址所在的数据。2.…

蓝奥声无线同步数据传输技术在物联网方面应用的优势

随着物联网技术的发展,其应用场景已经从简单的商品和服务扩展到广泛的社会和行业。当前,世界各地都在努力通过技术推动经济增长。对于许多行业来说,物联网技术的应用无疑将是一个新的增长机会。同时,物联网将推动社会结构从“制造…

Red Hat Linux 命令Crontab的使用方法

Red Hat Linux 命令Crontab的使用方法1 cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业。由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动、关闭这个服务: /sbin/service crond start //启动服务 /…

C++的三大特性之继承

目录 一 继承的概念 代码: 总结: 二 继承中的关系 三 继承中的作用域问题 什么是域? 隐藏: 隐藏的场景: 总结 四 赋值兼容原则 什么是赋值兼容原则? 与平时强制类型转换的区别 这一个赋值兼容原则…

编译原理学习笔记18——语义分析和中间代码生成3

编译原理学习笔记18——语义分析和中间代码生成318.1 布尔表达式及其计算18.2 按数值表示法翻译布尔表达式18.3 带优化翻译布尔表达式18.1 布尔表达式及其计算 布尔表达式及其用途 计算布尔表达式的两种方法 计算布尔表达式的两种方法 18.2 按数值表示法翻译布尔表达式 数…

toString()、String.valueOf、(String)强转,有啥区别?

TOC 首先我们看这三头货,什么toString()、String.valueOf、(String)强转?有啥区别?就问你是不是很像,是不是都有一个String? 说白了,这三个都是将XX给变成String,简称变身String的方法 接下来一…

IDEA maven使用详解

前提 确保本地安装了maven 以一个模块工程为例,内部包含了许多maven项目 生命周期 这是全部的生命周期 其中,常用的生命周期的各个功能为: (clean生命周期)mvn clean清理target (default生命周期①)mvn validate验证项目为maven项目&a…

自然语言处理的进阶之路

1、隐马尔可夫链路一般较短原因 连乘链路太长,会导致数据稀疏,零频词太多 2、零频问题的一般解决方案 平滑/回退/差值 当n设置较小时,仍然会存在oov问题(语料中未出现的词) 2.1、平滑 2.1.1、加1平滑/拉普拉斯平…

Maven初级(一)

目录 一. Maven概述 1.1 Maven是什么 1.2 Maven的作用 1.2.1 项目构建 1.2.2 依赖管理 1.2.3 统一项目结构 1.3 Maven模型 1.3.1 插件 1.3.2 项目对象模型 1.3.3 依赖管理模型 二. Maven基础概念 2.1 仓库: 2.2 仓库分类 2.2.2 远程仓库(私服) 中央仓…

Python继承的优缺点

推出继承的初衷是让新手顺利使用只有专家才能设计出来的框架!子类化内置类型的问题在Python2.2之前,内置类型不能子类化,如list、dict等。在Python2.2之后,内置类型可以子类化了,但是要注意的是:内置类型&a…

Individual tree segmentation and tree-counting using supervised clustering

ABSTRACT 个体树木分割 (ITS) 或树木计数是精准林业和农业过程中的一项基础工作。与费时费力的人工检查不同,计算机视觉在基于无人机 (UAV) 的应用中显示出巨大的前景;此类应用之一包括森林资源清单中的自动树木计数问题。然而,由于树冠冠层…

深度学习性能评估指标介绍

首先是相关数据描述。假设原始样本中有两类数据,其中:总共有P个类别为1的样本,假设类别1为正例总共有N个类别为0的样本,假设类别0为负例经过分类后:有TP个类别为1的样本被系统正确判定为类别1,FN个类别为1的…

【哈希表】leetcode1. 两数之和(C/C++/Java/Python/Js)

leetcode1. 两数之和1 题目2 思路3 代码3.1 C版本3.2 C版本3.3 Java版本3.4 Python版本3.5 JavaScript版本4 总结1 题目 题源链接 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数…

iPad 屏幕镜像到 macbook

将iPad 到屏幕投屏到 macbook,只需要三步就可以实现用数据线连接ipad和macbook在macbook的应用中找到QuickTime Player,打开QuickTime Player,在【文件】中选择【新建影片】在弹出窗口的小箭头中,选择需要的iPad名称通过数据线连接…