webpack的详细注解

最新推荐文章于 2024-03-05 12:34:43 发布
最新推荐文章于 2024-03-05 12:34:43 发布
阅读量319 收藏 2
点赞数
分类专栏： webpack 文章标签： webpack 前端 node.js
原文链接：https://www.bilibili.com/video/BV1e7411j7T5?p=39&spm_id_from=pageDriver
版权

环境参数和预备技能：

在这里插入图片描述

webpack是什么

在这里插入图片描述

webpack的五个核心概念

Entry

入口

Output

输出，资源的命名等

Loader

处理非js资源

Plugins

执行更广泛的任务，从打包优化和压缩，一直到重新定义环境中的变量等

Mode

开发模式和生产模式
在这里插入图片描述

webpack的基本使用

下载两个包。
在这里插入图片描述
在这里插入图片描述
生产环境下的多了压缩。
无法打包样式文件。
在这里插入图片描述
在这里插入图片描述

打包样式资源

我们先要定义一个配置文件。
在这里插入图片描述
在这里插入图片描述

项目代码我们基于ES6模块化，项目代码我们基于common JS模块化。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
样式中的详细配置。
在这里插入图片描述
npm init
初始化包文件。
下载两个包。
在这里插入图片描述
在这里插入图片描述
运行一下。指令：webpack
在这里插入图片描述
less需要添加一个规则。
在这里插入图片描述

在这里插入图片描述

打包html资源

在这里插入图片描述
下载插件。
在这里插入图片描述
引入插件，是一个构造函数。
在这里插入图片描述
使用。
在这里插入图片描述会帮我们自动引入在入口文件标识要引入的文件。

打包图片资源

使用loader处理图片资源。
在这里插入图片描述
下载两个包。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上述的处理不了html的文件，所以我们要将html引进来，让url去解析，但是url解析使用的是es6的解析规则，html使用的commonJS的规则，我们我们关掉es解析模块。

在这里插入图片描述
不希望名字太长的话，我们可以对图片重命名。
在这里插入图片描述

打包其他资源

比如字体图标。
我们推荐阿里的图标库。
在这里插入图片描述
把其他打包的资源排除，使用我们的file-loader打包其他资源。
在这里插入图片描述
在这里插入图片描述

devServer

在这里插入图片描述
我们需要下载这个包。
在这里插入图片描述
包是本地安装的，所以需要用npx启动。
在这里插入图片描述
监视源代码的变化，一旦发现变化，就会自动编译。再也不需要我们重新打包查看效果。
自动打开浏览器。
在这里插入图片描述

开发环境基本配置

开发环境基本配置，能让代码运行。
在这里插入图片描述
资源越来越多，需要我们划分好目录。css样式文件也被打包到js文件中。

构建环境介绍

webpack将我们的文件打包成浏览器能够识别的文件。

提取css成单独文件

下载一个插件。
在这里插入图片描述
我们先引入这一个插件。
在这里插入图片描述
在这里插入图片描述
引入生成的单独css文件。
在这里插入图片描述
对我们输出的css文件进行重命名。
在这里插入图片描述

css兼容性处理

在这里插入图片描述
下载好两个包。
在这里插入图片描述
在这里插入图片描述
配置一下package.json
在这里插入图片描述
在这里插入图片描述
设置nodejs的环境变量。
在这里插入图片描述
配置一下。
在这里插入图片描述

压缩css

压缩css的插件。
在这里插入图片描述
引入。
在这里插入图片描述
调用。
在这里插入图片描述

js语法检查eslint

需要两个库。
在这里插入图片描述
只检查自己写的源代码。
在这里插入图片描述
推荐的语法检查的库。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下载这些包。
在这里插入图片描述
package.json中的配置。
在这里插入图片描述
让它自动修改。
在这里插入图片描述
有时候我们需要保留某些代码。忽略检查！
在这里插入图片描述

js兼容性处理eslint

下载插件。
在这里插入图片描述
在这里插入图片描述
进行配置。
在这里插入图片描述
将es6的语法转化成es5的语法。
没办法解决promise。
在这里插入图片描述
引入文件。
在这里插入图片描述
解决全部的兼容性问题。
在这里插入图片描述
所以我们还是推荐按需下载。
在这里插入图片描述
下载一个包，然后进行一些配置。使用第三种方案就不能使用第二种方案。
在这里插入图片描述

压缩html和js

生产环境就会自动压缩js代码。
在这里插入图片描述
html不需要进行兼容性处理。进行一些配置。
在这里插入图片描述

生产环境基本配置

在这里插入图片描述

在这里插入图片描述
注意顺序。
在这里插入图片描述
复用loader的代码。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

性能优化介绍

在这里插入图片描述

HMR

比如，我们希望样式文件变化的时候，其他文件不要重新打包。所以，我们应该使用热模块。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
html文件只有一个文件，一旦发生变化，反正都要变化，不需要做热模块。
在这里插入图片描述
我们需要对js的代码做hmr。
在这里插入图片描述

在这里插入图片描述
入口文件反正需要发生改变。
在这里插入图片描述

source-map

在这里插入图片描述
构建后映射的文件。
在这里插入图片描述
包含不同的参数。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最佳方案：eval-source-map
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最佳方案：source-map

oneOf

让loader的处理性能更好。只会使用一个loader针对一个文件。
在这里插入图片描述
希望执行两个loader的话，我们要将代码不放在oneOf里面。单独放。
在这里插入图片描述

缓存

在这里插入图片描述

服务器代码

在这里插入图片描述
在这里插入图片描述
实现缓存之后，资源在用户端就会有1小时的强制缓存，如果此时出现了一个bug，我们的程序员修改了，但是重新打包上线的话，我们的资源因为被强制在用户端缓存了，不会再去服务端请求资源。所以我们更新资源的时候，我们为文件名添加版本号，让客户端重新请求资源。
每次打包都会生成一个哈希值。
在这里插入图片描述
我们给文件带上一个哈希值进行处理。
在这里插入图片描述
在这里插入图片描述
总结：

  1. babel缓存
    在这里插入图片描述
  2. 文件资源缓存
    在这里插入图片描述

chunk–代码块。
在这里插入图片描述

tree shaking

在这里插入图片描述

code split

在这里插入图片描述
多入口输出多个文件。
在这里插入图片描述
split——
在这里插入图片描述

将代码分开打包。公共文件打包成一起。
在这里插入图片描述
取一个固定名字。
在这里插入图片描述

懒加载和预加载

懒加载。按需加载，我们需要用到的时候才加载文件。
在这里插入图片描述
预加载。
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
预加载慎用，有很多兼容性问题。

PWA

PWA——渐进式网络开发程序。
下载好包。
在这里插入图片描述
配置一下插件。
在这里插入图片描述
在这里插入图片描述

插件帮我们生成文件。
全局资源加载好以后就注册。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

多进程打包

在这里插入图片描述
在这里插入图片描述
thread-loader放在某一个loader的后面，就会使得该进程变多进程。

externals

忽略某些包的打包。
在这里插入图片描述

dll

可以对代码进行单独打包。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

性能优化总结

在这里插入图片描述
在这里插入图片描述

webpack配置详细之entry

三种取值情况。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

webpack配置详细之output

在这里插入图片描述

webpack配置详细之module

在这里插入图片描述
在这里插入图片描述

webpack配置详细之resolve

在这里插入图片描述

webpack配置详细之devServer

在这里插入图片描述
在这里插入图片描述

webpack配置详细之optimizaition

在生产环境才有意义。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下载并引入一个库，使用插件。

在这里插入图片描述
在这里插入图片描述

webpack5介绍和使用

webpack的下载。
在这里插入图片描述
配置文件更加简单。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Serena_tz
关注
专栏目录
webpack 打包添加注释
oYuLian的博客
05-10 2301
BannerPlugin插件（注释插件） BannerPlugin插件是webpack自带的插件，所以要使用此插件，先在webpack.config.js中引用webpack： const webpack = require("webpack") 因为是插件，我们要在plugins中配置，如下： plugins: [ new webpack.BannerPlugin('lzijia...
Webpack智能提示
Mr_Ying的博客
05-23 512
通过 import 的方式导入 Webpack 模块中的 Configuration 类型，然后根据类型注释的方式将变量标注为这个类型，这样我们在编写这个对象的内部结构时就可以有正确的智能提示。 但在运行前记得注释，Nodejs还不支持import（ES6 module） // ./webpack.config.js // 一定记得运行 Webpack 前先注释掉这里。 import { Configuration } from 'webpack' /** * @type {Configuration
Webpack 完整注释 打包教程
03-26
Webpack 完整注释，使用webpack常用的Api，分割清晰，使用简单，直接放入站点
webpack配置超详细注释解读
weixin_42003850的博客
05-11 547
webpack配置 const HtmlWebpackPlugin = require('html-webpack-plugin') // const CleanWebpackPlugin = require('clean-webpack-plugin') 需要解构，正确方式如下 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { entry: "./src/index.ts", //入
【译】为前端开发准备的webpack4注解
weixin_34418883的博客
12-27 271
原文：nystudio107.com/blog/an-ann…使用前端开发的webpack4注解如今，web开发变得愈发复杂，所以需要引入其他工具协助我们开发网站。下面介绍一个现实开发中关于webpack4配置的完整例子。开发一个现代化的网站已经成为流行的开发方式。也期望网站提供更多的功能，而不仅仅是具有市场的宣传效果，因为它还具有传统APP的功能。一旦系统功能变复杂了，就需要把功能分解成组件，使...
webpack 配置项解析 注释
shengjon的博客
01-03 225
annotation-loader:webpack注解加载器
06-14
webpack注解加载器 安装 npm install --save-dev annotation-loader 用法 对于 test.js var foo = { } ; /* @bar */ console . log ( 'bar' ) ; /*@/bar*/ var bar = { } ; /* @bar 2*/ console . log ( 'bar2' )...
Webpack 实现 AngularJS 的延迟加载
10-22
ng-annotate是用于Angular的依赖注入注解，帮助处理Angular的依赖注入语法，使得代码更加清晰和简洁。Babel则是一个JavaScript编译器，它能够将ES6或更高版本的JavaScript代码转换成浏览器能够理解的ES5代码，从而...
webpack 不压缩代码_如何不使用webpack缩小源代码
Web 开发&软件开发
08-10 4997
如何不使用webpack缩小源代码 webpack JavaScript实用程序已经占领了现代JavaScript领域，以至于很难成为一个JavaScript开发人员并且不使用它。 JavaScript构建实用程序是它们隐式地执行最佳实践的关键，例如最小化代码，缓存等。 我最近正在调试捆绑的webpack应用程序，很快就知道，唯一的方法是调试实际源代码，而不是最小化的代码。 杜伊 ...
angularjs-webpack:angularJs基本框架
05-18
这里，`ng-annotate-loader`负责识别和添加AngularJS的依赖注解，而`babel-loader`则用来转换ES6+语法，使得在旧版浏览器中也能运行。 **构建过程** 在项目中，你可能会有多个文件和模块，Webpack会通过配置的入口...
webpack详解
zhangxiaobai___的博客
11-23 607
webpack
webpack常用loader注释
u013261261的专栏
07-26 583
1.babel-loader : es6转码 2.vue-loader | react-loader | san-loader :把相应的.x结尾的文件转换为js模块 3.json-loader : 处理导入json文件  // webpack2+ 内置处理json 4.url-loader : 处理图片或字体图片资源，转换成base64插入html中 5.html-loader : 解析...
一个标准的webpack的config文件，并标注相应注释。
最新发布
sjy8593457的博客
03-05 263
【代码】一个标准的webpack的config文件，并标注相应注释。
用于前端开发的webpack4配置[带注释]
weixin_33936401的博客
12-08 541
❤️觉得不错点个赞哟❤️。原文链接 随着web开发变得越来越复杂，我们需要使用工具来帮助我们构建现代化网站。这是一个完整通过复杂webpack4配置的线上生产例子。 构建现代化网站已经成为自定义应用程序开发，网站期望能做的更多，具有传统应用的功能，而不仅仅是一个推广网站。 随着一个流程变得复杂时，我们就会将它分解为可管理的组件，并使用工具进行自动化构建，比如制造汽车、起草法案[法律文件]、建...
使用webpack打包发现css单行注释报错
小鱼尔呀
05-08 1550
手动创建了webpack项目，并引入了less,感觉一切正常，可是打包时发现居然报错： 解决办法 ： postcss.config.js文件中新增 parser:'postcss-scss'
webpack学习笔记一
lily
11-21 487
webpack
webpack的介绍及开发环境的详细配置（附注释和代码）
codingWeb的博客
03-28 235
webpack 简介 1.1webpack 是什么 ----------- webpack 是一种前端资源构建工具，一个静态模块打包器(modulebundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 webpack 五个核心概念 En...
webpack魔法注释-预获取/预加载模块
SoulKey的博客
01-10 724
Webpack v4.6.0+ 增加了对预获取（prefetch）和预加载（preload）的支持。并追加到页面头部，指示浏览器在闲置时间预取。下面这个预获取的简单示例中，有一个。组件，然后在点击后按需加载。组件，其内部渲染一个。
Webpack打包之坑 _ webpackChunkName【魔法注释】
热门推荐
Mr.小灰狼_随笔
04-03 1万+
Webpack打包之坑 _ webpackChunkName【魔法注释】 目录 事件起因 百度查阅 webpackChunkName 结束了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值