2024路在何方

title: 3.webpack5的新特性date: 2021-08-17 20:345.URIsWebpack 5 支持在请求中处理协议支持data 支持 Base64 或原始编码,MimeType可以在module.rule中被映射到加载器和模块类型这是一个实验性的 api5.1 使用举例import data from “data:text/javascript, export default 'title'”;console.log(data6.moduleIds 和 ch.

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：webpack中有很多容易混淆的概念，也是面试中经常会涉及的点，在这里给大家抛一个链接，个人认为写的比较好，可以参考学习：https://www.cnblogs.com/skychx/tag/

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从第16节开始，专攻webpack原理和高级API，只有深入原理和高级API，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：commonjs与commonjs2的区别// commonjsexports.add = function(a, b){ return a + b;}

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：module: 只要是文件，都是一个modulemchunk：代码块，是webpack根据功能拆分出来的（chunk是无法在打包结果中看到的，打包结果中看到的是bundle），包含三种

mainFilds和mainFilesresolve: { // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是： mainFields: ['browser', 'module', 'main'], // target 的值为其他时，mainFields 默认值为： mainFields: ["module", "main"],}这里的mainFileds代表了一个包解析入口文件应该看的字段，按照上面

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：由于webpack基本配置无法满足开发者需求，所以需要借助plugin对webpack构建流程进行修改，来达到改变或优化webpack编译结果的目的。1.你有没有开发过插件，你是怎么开发开

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：webpack实现插件的流程：创建 - webpack在其内部对象上创建各种钩子Hook注册 - 插件讲自己的方法注册到对应的钩子Hook上，交给webpack调用 - webpack编

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：loader的原理1.loader介绍loader其实就是一个到处为函数的js模块，函数的参数接收上一个代码产生的结果或者资源文件。loader可以组合使用。loader的结果是Stri

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：webpack工作流1. webpack工作流步骤（高频面试点）初始化参数：从配置文件和Shell语句中读取并合并参数，得出最终的配置对象用上一步得到的参数初始化Compiler对象加

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：tapable 是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：1.浏览器调试在node环境执行以下命令，会生成一个服务地址node --inspect-brk ./node_modules/webpack-cli/bin/cli.js浏览器打

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：babel能够将es6的大部分语法转换成es5，例如箭头函数转成普通函数等。今天就利用babel的一些库，手写一版箭头函数转换成普通函数，感受下ast语法树的作用。依赖库介绍（重点）@

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：ast语法树(会有专门章节详细介绍AST，本节只是了解大概过程)在我们工作中经常会用到，比如以下场景：代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：import()对于webpack来说，是一个天然的分割点，也就是说，webpack碰到import()会对import()进行解析。怎么解析的，过程主要是：面试题：webpack解析impo

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：1.commonjs加载commonjs引入是commonjs，导出是commonjs引入文件let title = require("./title");console.log(

【重学webpack系列——webpack5.0】1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。可以点击上方专栏订阅哦。以下是本节正文：1. Symbol.toStringTag这是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签我们通常利用Obje

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习，可以点击上方专栏订阅哦。以下是本节正文：移动端适配方案当我们在移动端开发时，会发现需要兼容各种尺寸的终端设备，所以，如果有一套统一的适配方案，是十分有必要的。适配方案将页面宽度分成 10 份（x 份自己定），那么每份宽度就

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：压缩JS、CSS和HTML及图片压缩js用terser-webpack-plugin，不在使用uglifyjs-webpack-plugin，因为前者支持ES6，后者不支持，所以现在都使用前者压缩css用optim

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：一文彻底了解hash、chunkhash和contenthash的区别在webpack打包中，通常哈希的种类有项目hash、chunkhash、contenthash。而哈希一般是结合CDN缓存来使用的。通过web

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：提取CSS，指定CSS和图片的目录因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载1. 提取CSS，打包后的css放到指定目录这里需要借助到mini-css

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1.CleanWebpackPluginclean-webpack-plugin是一个插件，会在每次打包前，先清空制定目录下的文件，然后再打包plugins:[ new CleanWebpackPlug

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1.webpack-dev-middleware是一个中间件，它可以嵌入到现在的其他的express应用，提供打包功能，并且可以提供产出文件的访问服务写一个express服务：let express =

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：webpack-dev-server使用详解webpack-dev-server是开发服务器的配置，本质是启动了一个express服务器下面，看一下常用的配置项及其作用：publicPath: 详解可以参照

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：watch和watchOptions的使用我们在开发环境下，可以用webpack-dev-server去监听文件，文件修改后，就会自动打包，那么生产环境下，能否也可以监听自动打包呢？这就用到了watch和watch

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1. 直接引入import _ from 'lodash'console.log(_.join(['a', 'b', 'c'], '@'));2.插件引入利用webpack.ProvidePlugin插件，

在工作中，经常会用到一些外部依赖的库。通常有以下的引用形式// 直接通过 cdn 引用，然后在全局直接使用 React 即可1、<script src="https://unpkg.com/react@16.12.0/umd/react.development.js" />// 通过 cmd 的形式引入2、const React = require('React')// import 的方式最终会被转换为通过 cmd 的形式引入3、const React = import('Re

webpack最基本的配置就是导出一个静态的对象，但是由于我们业务比较复杂，往往需要动态配置webpack以构建目标代码。幸运的是，webpack为我们提供了动态配置webpack文件的支持。下面介绍一下webpack的多种配置类型。1、导出为一个对象（Object）webpack最常见的配置类型为导出一个对象，即const path = require('path')module.exports = { entry: './src/index.js', output: { filena

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1. 那么多babel相关的包，到底是怎么运转的？（重点）babel可以实现对代码的转换，比如可以把ES6变成ES5，转换靠的工具是babel-loaderbabel-loader会调用@babel/cor

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1. 对.css的处理首先，需要用postcss-loader对样式添加浏览器前缀然后，需要用css-loader处理样式文件中的import和url最后，需要用style-loader将css转成js脚本，j

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：我们在webpack配置文件中，经常会看到devServer这个属性，这个属性常常用于配置开发服务器。也就是当本地起一个开发服务的时候的配置。1. webpack-dev-server使得devServer有效

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：2.webpack中各种publicPath的使用publicPath，顾名思义"公共路径"，其在各项配置中，基本就是作为资源路径前缀使用。即便意思都近似为资源路径前缀，但其实有很大差别。publicPath的

推荐：《webpack学完这些就够了》《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。以下是本节正文：1. webpack基本概念webpack支持CommonJs和ES Module在pacakge.json的scripts中，dev中原先配置使用的webpack-dev-server,现在只小改成ser