Open felix-cao opened 6 years ago
上一篇我们聊了 Webpack 入口并构建了一个采用 CommonJS 规范的模块,本篇来聊一聊利用 loader 加载 css 模块。
Webpack
CommonJS
loader
css
Webpack 把一切文件都看作模块,CSS 文件也不例外。但是 Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
CSS
JavaScript
loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。
require
CoffeeScript
JSX
LESS
官方给我们提供了三种使用 loader 的方式,这里主要介绍 内联 模式 和 命令 模式。 下一节 《Webpack 入门五:配置文件》介绍 配置文件 的方式。
接上一节的例子,我们要在页面中引入一个 CSS 样式文件 main.css, 在入口文件 main.js 将main.css 看成一个模块, 然后用 css-loader 来读取它, 再用 style-loader 把它插入到页面中。
main.css
main.js
css-loader
style-loader
@import
url(…)
require()
新增 main.css
body { background: yellow; }
修改 main.js:
require("!style-loader!css-loader!./main.css") // 载入 main.css document.write('这里是入口<br/><br/>'); document.write(require('./module.js'));
感叹号! 来将资源文件与loaders分开,使用多个loaders,应在所有的转换规则(loader)之前加上感叹号!
!
loaders
安装 loader:
$ npm i css-loader style-loader
重新编译打包,清除缓存刷新页面,就可以看到黄色的页面背景了。
$ webpack main.js app.js $ http-server
可是,如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(文件扩展名)来自动绑定需要的 loader。
require CSS
将 main.js 中的 require("!style-loader!css-loader!./main.css") 修改为 require("./main.css") ,然后执行:
require("!style-loader!css-loader!./main.css")
require("./main.css")
$ webpack main.js app.js --module-bind 'css=style-loader!css-loader'
显然,这两种使用 loader 的方式,效果是一样的。
附 源码
一、简述
上一篇我们聊了
Webpack
入口并构建了一个采用CommonJS
规范的模块,本篇来聊一聊利用loader
加载css
模块。Webpack
把一切文件都看作模块,CSS
文件也不例外。但是Webpack
本身只能处理JavaScript
模块,如果要处理其他类型的文件,就需要使用loader
进行转换。loader
可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过require
来加载任何类型的模块或文件,比如CoffeeScript
、JSX
、LESS
或图片。官方给我们提供了三种使用
loader
的方式,这里主要介绍 内联 模式 和 命令 模式。 下一节 《Webpack 入门五:配置文件》介绍 配置文件 的方式。二、内联模式
接上一节的例子,我们要在页面中引入一个
CSS
样式文件main.css
, 在入口文件main.js
将main.css
看成一个模块, 然后用css-loader
来读取它, 再用style-loader
把它插入到页面中。css-loader
使你能够使用类似@import
和url(…)
的方法实现require()
的功能style-loader
将所有的计算后的样式加入页面中;新增
main.css
修改
main.js
:感叹号
!
来将资源文件与loaders
分开,使用多个loaders
,应在所有的转换规则(loader)之前加上感叹号!安装
loader
:重新编译打包,清除缓存刷新页面,就可以看到黄色的页面背景了。
三、命令行模式
可是,如果每次
require CSS
文件的时候都要写loader
前缀,是一件很繁琐的事情。我们可以根据模块类型(文件扩展名)来自动绑定需要的loader
。将
main.js
中的require("!style-loader!css-loader!./main.css")
修改为require("./main.css")
,然后执行:显然,这两种使用
loader
的方式,效果是一样的。附 源码
Reference