2.2.3 使用webpack loader

简介: loader 是作用于应用中资源文件的转换行为。它们是函数(运行在 Node.js 环境中),接收资源文件的源代码作为参数,并返回新代码。举个栗子,可以通过jsx-loader将 Reac t的 JSX 代码转换为 JS 代码,从而可以被浏览器执行style-loader:将 ...

loader 是作用于应用中资源文件的转换行为。它们是函数(运行在 Node.js 环境中),接收资源文件的源代码作为参数,并返回新代码。
举个栗子,可以通过
jsx-loader将 Reac t的 JSX 代码转换为 JS 代码,从而可以被浏览器执行
style-loader:将 CSS 代码以 <style> 标签的形式插入到页面上从而生效
css-loader:检查 CSS 代码中的 import 语句找到依赖并合并,大部分情况下,两者搭配使用

通过 npm init 在项目目录下生成package.json文件,安装loader

npm install style-loader css-loader --save-dev

我们在入口文件 index.js 中通过 require 引入 index.css

index.js

var text = require("./hello");
console.log(text);

require('style-loader!css-loader!./index.css');
document.body.appendChild(document.createElement('div'));

类似style!css!,这样的 xxx! 写法是为了指定特定的 loader。这里告诉 webpack 使用 style-loader ,css-loader 这两个 loader 对 index.css 中的内容进行处理。
下一章通过配置文件 webpack.config.js 对 webpack 构建行为进行配置。

执行构建命令:

webpack ./index.js bundle.js

效果图

页面上最终并没有插入<link>标签,结果文件中也没有 CSS文件,却通过一个引入一个 JS 文件实现了样式的引入。这正是 webpack 的特点之一, 任何类型的模块(资源文件),理论上都可以通过被转化为 JavaScript 代码,实现与其他模块的合并和加载

这里通过 JavaScript 加载 CSS 是借助了 style-loader 的能力(将 CSS 代码以 <style> 标签的形式插入到页面中,标签内容通过 JavaScript 生成),与传统的页面直接插入标签相比,该方法存在着不可忽视的缺点,样式内容的生效时间被延后。

解决办法:借助 extract-text-webpack-plugin 插件,webpack 可以在打包时将样式内容抽取并输出到额外的 CSS 文件中,然后在页面中直接引入结果 CSS 文件即可。

目录
相关文章
|
7月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
7月前
|
JavaScript 前端开发
Webpack中loader的使用场景
Webpack中的Loader用于处理和转换模块文件,如将TypeScript转为JavaScript、CSS预处理等,通过配置不同的Loader,可以灵活地支持多种文件类型和语言,实现模块化开发与构建优化。
|
7月前
|
前端开发 JavaScript
webpack 中 loader 和 plugin 的区别
在 webpack 中,loader 用于转换模块的源代码,如将 TypeScript 转为 JavaScript;而 plugin 则扩展了 webpack 的功能,可以执行更复杂的任务,如优化打包文件、注入环境变量等。两者共同作用于构建流程的不同阶段。
|
8月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
211 1
|
8月前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
180 2
|
8月前
|
前端开发 JavaScript
Webpack 常用 Loader 和 Plugin
【10月更文挑战第12天】Webpack 是一个强大的模块打包工具,能够将各种资源模块进行打包和处理。Loader 用于转换模块的源代码,如 `babel-loader` 将 ES6+ 代码转换为 ES5,`css-loader` 处理 CSS 文件等。Plugin 扩展 Webpack 功能,如 `HtmlWebpackPlugin` 自动生成 HTML 文件,`UglifyJsPlugin` 压缩 JavaScript 代码。通过合理配置和使用 Loader 和 Plugin,可以构建高效、优化的项目。
143 2
|
9月前
|
设计模式 前端开发 JavaScript
webpack实战之手写一个loader和plugin
该文章详细讲解了如何从零开始编写一个自定义的Webpack Loader和Plugin,包括它们的工作原理、开发步骤以及如何将自定义的Loader和Plugin集成到Webpack配置中。
webpack实战之手写一个loader和plugin
|
10月前
|
缓存 JSON JavaScript
Webpack 传递给 Loader 的原始内容是一个 UTF-8 格式编码的字符串
本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而对于CSS、图片等其他类型文件,则需要Loader来转换。文章列举了多种常见Loader,如css-loader、style-loader、babel-loader等,并提供了具体配置示例。此外,还介绍了如何自定义Loader,包括初始化项目、实现基本功能及处理异步操作等内容。通过本文,读者可以全面了解Loader的作用及其实现方法。
74 3
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
392 0
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
144 0