webpack

package.json 文件 以下依赖包我是跟着视频一一学习下载的，并不是在项目中所需要，不一定全部下载。 webpack.dev.js 文件 这个文件是我们进行开发环境的配置。 webpack.p

总结 我们从四个角度对 webpack 和代码进行优化 提升开发体验 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示 使用 HotModuleReplacement 让开发时

PWA 渐进式网络应用程序 开发Web App 项目，项目一旦处于离线状态，就没有办法访问了，我们希望给项目提供离线体验 渐进式网络应用程序（progressive web application)简

Core.js 过去我们使用babel对js代码进行兼容处理，其中使用@babel/preset-env智能预设来处理兼容性问题。 他能将ES6的一些语法进行编译转换，比如箭头函数、...（扩展运算符

runtimeChunk 让我们更好的使用缓存 我们a, b有两个js文件, 其中在a.js中引用了b.js，当我们修改了b.js中的代码后，重新打包编译，会发现a，b两个的contenthash都会

Preload与Prefetch 我们前面已经做了code split，同时会使用import() 动态导入语法来进行代码按需加载（或者是懒加载，例如路由懒加载就是这样实现的）。但是加载速度还不够好，

单入口 开发时我们使用的框架可能是单页面应用（SPA），只有一个入口（单入口）。那么我们需要这样配置： 在 webpack.pord.js 中 给模块命名 splitChunks 打包后的chunks

Code Split 打包代码时会将所有的js打包到一个文件夹中，代码体积太大，如果我们只要渲染首页，就应该只加载首页的js代码，其它文件不加载。 所以我们需要将打包生成的文件进行代码分割，生成多个j

Tree Shaking 开发时我们定义了一些工具类函数库，或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库，但是实际上我们可能只用一小部分的功能，这样将整个库都打包进来

OneOf 当规则匹配时，只使用第一个匹配规则 当webpack处理静态资源的时候，需要经过每一个loader进行判断，是否可以处理当前的静态资源，如果其中一个a-loader可以解析，这个静态资源还

高级SourceMap 开发时我们运行的代码是经过webpack编译后的代码，例如： 如果碰见代码报错 我们在浏览器看到的错误是在webpack编译后展示的错误，如果以后项目非常庞大，不便于我们查找错

webpack-dev-server webpack-dev-serve 为你提供了一个本地服务器 web serve, 并且具有实时加载更新的更能。 首先下载 webpack-dev-serve 修

主要用于将es6语法编写转译为向后兼容的jsvascript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 配置文件 babel.config.* :新建文件，位于项目根目录下 babel.c

js资源webpack不是已经处理了吗，为什么我们还要处理呢？ 原因是 webpack 对js处理是有限的，只能编译js中的ES模块化语法，不能编译其他语法，导致js不能在IE等浏览器运行，所以我们需

处理图片资源配置的loader 之前的版本webpack4，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在webpack5已经将这两个 Loader 功能内置到

处理css的资源 如果需要使用css-loader,需要安装webpack@5，首先你需要先安装css-loader 然后把loader应用到你的webpack的配置中。 webpack.config

基本配置 webpack有五大核心概念 entry(入口) 指示webpack从哪个文件开始打包 output(输出) 指示Webpack打包后的文件输出到哪里去，如何命名等 loader(加载器)

基本使用 webpack 是一个静态资源打包工具 它会以一个或多个文件作为打包入口，将我们的整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器端运行了。我们

loader加载器 webpack 支持使用laoder对文件进行预处理。这样你就可以使用除js以外的静态文件，并且可以使用Node.js轻松编写自己的loader。 部分loader类型 文件 va