摘要：
开发服务器&自动化 每次写完代码都需要手动输入npx webpack指令才能编译代码，太麻烦了，我们希望一切自动化。 1. 下载包 npm i webpack-dev-server -D 2. 配置 webpack.config.js const path = require("path"); co 阅读全文
摘要：
为什么要处理html资源？ 用来优化手动引入打包后的js资源，让其自动引入，而且手动引入的js文件名字在打包时候可能发送变化，打包的时候改个名字，那在html里把名字写死了，到时候就无法找到资源，而且，如果打包生成了10个js文件和10个css资源，一个个引入也很麻烦，而且可能这些资源之间还存在依赖 阅读全文
摘要：
处理 js 资源 有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？ 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。 其次开发中，团队对代码 阅读全文
摘要：
开发中可能还存在一些其他资源，如音视频等，我们也一起处理了。不用下载别的loader。 配置 webpack.config.js { test: /\.(ttf|woff2?|map4|map3|avi)$/, type: "asset/resource", generator: { filenam 阅读全文
摘要：
处理字体图标资源 1. 下载字体图标文件 1.打开阿里巴巴矢量图标库 2.选择想要的图标添加到购物车， 3.添加到项目 4.统一下载到本地 5.解压 6.打开demo_index.html Fontclass方式使用 2. 添加字体图标资源 src/css/iconfont.css 发现iconfo 阅读全文
摘要：
自动清空上次打包资源 1. 配置 webpack.config.js output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", //原理：在打包前，将path整个目录里的内容清空，再打包 clean 阅读全文
摘要：
修改输出资源的名称和路径 1. 配置 webpack.config.js 修改入口文件输出位置： output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/ 阅读全文
摘要：
处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require( 阅读全文
摘要：
开发模式顾名思义就是我们开发代码时使用webpack的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范 提前检查代码的一 阅读全文
摘要：
介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader（加载器） 来帮助 Webpack 解析样式资源。 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用。 官方文档找不到的话，可以从社区 Github 中搜索查询 webpack中文官方文档 处理 阅读全文