摘要：
补充 entry 单个入口 module.exports = { // 可简写成 entry:'./path/to/my/entry/file.js' entry: { main: './path/to/my/entry/file.js', }, }; 阅读全文
摘要：
开发服务器&自动化 每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化 1. 下载包 npm i webpack-dev-server -D 2. 配置 webpack.config.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, 阅读全文
摘要：
webpack基础-总结 本章节我们学会了 Webpack 基本使用，掌握了以下功能： 两种开发模式 开发模式：代码能编译自动化运行 生产模式：代码编译优化输出 Webpack 基本功能 开发模式：可以编译 ES Module 语法 生产模式：可以编译 ES Module 语法，压缩 js 代码 Webpack 配置文件 阅读全文
摘要：
学习资料 打开 哔哩哔哩 视频网站，搜索尚硅谷。 阅读全文
摘要：
适合群体 Webpack 零基础，想从事项目脚手架研发的人。 具备 Webpack 开发经验，想要提升更多的人。 不是很了解 Webpack，但是想提升工资的人。 阅读全文
摘要：
我能学到什么 青铜：我们会学习 Webpack 基础，包含是什么，有什么用，如何使用（这是最重要的）。 黄金：我们会学习 Webpack 高级优化配置，提升项目打包和运行时性能（这也是面试中最常问的点）。 钻石：我们会学习如何从零开始搭建一个项目脚手架，并进行优化（包含 React 和 Vue）。 王者：我们可以学习 Webpack 的原理，这也是迈向大神必备一条路。 阅读全文
摘要：
前置知识 对 Nodejs 各个核心模块操作有一定认识。 比如：fs、path、os 等。 对 React 和 Vue 有一定认识，并且开发过项目。 这对于学习项目部分内容非常有帮助。 阅读全文
摘要：
依赖环境 Nodejs 16+ 阅读全文
摘要：
Loader 原理 loader 概念 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 loader 执行顺序 分类 pre： 前置 loader normal： 普通 loader inline： 内联 loader post： 后置 loader 执行顺序 4 类 loader 的执行优级为：pre > normal > inline > post 。 相同优先级的 loader 执行顺序为：从右到左，从下到上。 阅读全文
摘要：
Plugin 原理 Plugin 的作用 通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。 Plugin 工作原理 webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 ——「深入浅出 Webpack」 阅读全文