标签： loader

发布于

解释 Vue CLI 如何集成 `eslint-loader` 和 `prettier-loader`，实现代码风格检查和格式化。

大家好，我是今天的主讲人，老码农。今天咱们聊聊 Vue CLI 如何把 eslint-loader 和 prettier-loader 这俩兄弟安排进项目里，让它们帮咱们检查代码风格，顺便格式化代码，让代码看起来赏心悦目，避免代码 review 的时候因为风格问题吵起来。 咱们先从概念入手，然后一步步深入，最后手把手教你配置。准备好了吗？ Let’s go! 第一部分： 概念扫盲，知己知彼 在深入 Vue CLI 之前，咱们先搞清楚几个概念： ESLint: 这玩意儿是个 JavaScript 代码检查工具，它能找出你代码里潜在的问题，比如未使用的变量、不符合规范的写法等等。 简单来说，就是个代码警察，帮你揪出坏习惯。 Prettier: 这个家伙是个代码格式化工具，能自动帮你把代码格式化成统一的风格，比如缩进、空格、换行等等。 就像一个高级理发师，帮你把代码打理得整整齐齐。 Webpack: Vue CLI 背后的大佬，一个模块打包器。 它会把你的代码、图片、样式等等都打包成浏览器能识别的东西。 eslint-loader 和 prettier-loader 就是 Web …

继续阅读“解释 Vue CLI 如何集成 `eslint-loader` 和 `prettier-loader`，实现代码风格检查和格式化。”

发布于

Webpack 的打包原理是什么？解释 Loader, Plugin, Entry, Output, Module, Chunk, Bundle 等概念。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊前端界的“搬运工”—— Webpack。 别看它名字挺洋气，其实干的就是个打包的活儿，把我们写的各种 JavaScript、CSS、图片等等，打包成浏览器能看懂的“压缩包”。 Webpack 这玩意儿，就像个乐高大师，你给他一堆积木（各种资源），他能给你拼成一个精美的模型（最终的 Web 应用）。那么，他是怎么做到的呢？ 这就是我们今天要深入探讨的：Webpack 的打包原理。 Webpack 的核心概念： 要理解 Webpack 的原理，首先要搞清楚几个核心概念，它们就像乐高积木的不同形状，各有各的用途。 Entry（入口）： 这就像乐高模型的起点，告诉 Webpack 从哪里开始“拼”。通常是一个或多个 JavaScript 文件。 // webpack.config.js module.exports = { entry: ‘./src/index.js’, // 单入口 //entry: { //多入口 // main: ‘./src/index.js’, // vendor: ‘./src/vendor.js’ //} } …

继续阅读“Webpack 的打包原理是什么？解释 Loader, Plugin, Entry, Output, Module, Chunk, Bundle 等概念。”

发布于

自定义 Webpack Loader 与 Plugin 开发：实现定制化打包逻辑

好的，各位观众老爷，大家好！我是你们的老朋友，人称“打包小王子”的程序员阿飞。今天咱们要聊点硬核的，但保证用最通俗易懂的方式，把Webpack Loader和Plugin的开发讲得明明白白。 开场白：Webpack，前端界的变形金刚 Webpack，这名字听起来就很有科技感。说白了，它就像前端界的“变形金刚”，能把各种乱七八糟的文件（JS、CSS、图片、字体…）都变成浏览器能看懂的东西。它能把这些文件打包、压缩、优化，让你的网站跑得飞快。 但是，Webpack毕竟是个通用工具，它不可能满足所有人的需求。就像变形金刚也有不同的型号，需要根据不同任务进行定制。所以，我们就需要用到Webpack的两个超级武器：Loader和Plugin。 第一部分：Loader，代码界的“翻译官” 想象一下，你写了一段很时髦的ES6代码，但是老旧的浏览器看不懂怎么办？这时候就需要Loader出马了！ 1. 什么是Loader？ Loader本质上就是一个函数，它接收一个文件的内容作为输入，经过处理后，输出新的内容。你可以把它想象成一个“翻译官”，把各种文件“翻译”成Webpack能理解的模块。 例如： ba …

继续阅读“自定义 Webpack Loader 与 Plugin 开发：实现定制化打包逻辑”