Webpack 江湖
文章平均质量分 93
Webpack 介绍,方便于己,惠及于人。
秋堂主
倚楼听风雨,淡看江湖路!
展开
-
第5集丨webpack 江湖 —— 项目发布 和 source map
使用场景:当我们引用文件时候,使用../../这种模式,当文件目录很深的时候,就很不方便我们查找。解决方案:使用符号,表示src目录,从外往里找。不要使用../从里往外找。原创 2023-07-31 08:33:31 · 135 阅读 · 0 评论 -
第4集丨webpack 江湖 —— loader的安装和使用
`Webpack` 本身只能处理 `JavaScript` 模块,如果要处理其他类型的文件,就需要使用` loader `进行转换。`Loader` 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过` require` 来加载任何类型的模块或文件,比如 `CoffeeScript`、 `JSX`、 `LESS` 或图片。`loader` 用于对模块的源代码进行转换。`loader` 可以使你在` import `或 "`load`(加载)" 模块原创 2023-07-28 11:53:26 · 526 阅读 · 0 评论 -
第3集丨webpack 江湖 —— 插件(plugin)的安装和使用
`webpack plugins` 插件可以完成更多 `loader` 不能完成的功能。插件(`plugin`)的使用一般是在 `webpack` 的配置信息 `plugins` 选项中指定。`Webpack` 本身内置了一些常用的插件,还可以通过 `npm` 安装第三方插件。`webpack-dev-server` 可用于快速开发应用程序。类似于`node.js `阶段用到的 `nodemon` 工具,每当修改了源代码,`webpack` 会自动进行项目的打包构建。原创 2023-07-27 12:46:56 · 718 阅读 · 0 评论 -
第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo
纸上得来终觉浅,绝知此事要躬行。此次目标是:创建一个简单的webpack工程demo,来理解webpack的运行机制。`webpack` 是一个用于现代 `JavaScript` 应用程序的 静态模块打包工具。当 `webpack` 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(`dependency graph`),然后将你项目中所需的每一个模块组合成一个或多个 `bundles`,它们均为静态资源,用于展示你的内容。原创 2023-07-26 11:57:21 · 1517 阅读 · 0 评论 -
第1集丨webpack 江湖 —— 概述
`Webpack`是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 `loader` 的转换,任何形式的资源都可以视作模块,比如 `CommonJs` 模块、 `AMD` 模块、 `ES6` 模块、`CSS`、图片、 `JSON`、`Coffeescript`、 `LESS` 等。原创 2023-07-25 12:24:12 · 508 阅读 · 0 评论