Webpack5入门到原理1：前言

相关文章

• Webpack5入门到原理3：基本配置

  在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 loader（加载器） webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  2024年01月20日

  浏览(55)

• Webpack5入门到原理14：生产模式介绍

  生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 我们分别准备两个配置文件来放不同的配置 因为文件目录变了，所以所有绝对路径需要

  2024年01月23日

  浏览(61)

• Webpack5入门到原理21：提升开发体验

  开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： 所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。 所以我们需要更加准确

  2024年01月25日

  浏览(43)

• Webpack5入门到原理5：处理样式资源

  我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用 官方文档找不到的话，可以从社区 Github 中搜索查询 Webpack 官

  2024年01月21日

  浏览(52)

• Webpack5入门到原理11：处理 js 资源

  有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？ 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。 其次开发中，团队对代码格式是有严格要求的

  2024年01月20日

  浏览(61)

• Webpack5入门到原理12：处理 Html 资源

  webpack.config.js 去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入 此时 dist 目录就会输出一个 index.html 文件

  2024年01月23日

  浏览(105)

• Webpack5入门到原理6：处理图片资源

  过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 src/images/1.jpeg src/images/2.png src/images/3.gif src/less/index.less src/sass/index.sass src/styl/index.styl 打开 index.html 页面查看

  2024年01月20日

  浏览(46)

• Webpack5入门到原理22：提升打包构建速度

  开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。 所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。 HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、

  2024年01月21日

  浏览(47)

• Webpack5入门到原理19：React 脚手架搭建

  package.json .eslintrc.js babel.config.js webpack.config.js 修改运行指令 package.json

  2024年01月21日

  浏览(52)

• Webpack5入门到原理20：Vue 脚手架搭建

  package.json .eslintrc.js babel.config.js

  2024年01月24日

  浏览(60)