2.2.3 使用webpack loader-阿里云开发者社区

开发者社区> 开发与运维> 正文

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
1240
效果图

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章