【梅开三度】关于LOADER

编程开发   © 文章版权由 admin 解释,禁止匿名转载

#楼主# 2021-3-12

Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
执行以上命令后,会再当前目录生成 node_modules 目录,它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个 style.css 文件,代码如下:
app/style.css 文件
body {
background: yellow;
}
修改 runoob1.js 文件,代码如下:
app/runoob1.js 文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
接下来我们使用 webpack 命令来打包:
webpack runoob1.js bundle.js

Hash: a9ef45165f81c89a4363
Version: webpack 1.12.13
Time: 619ms
Asset Size Chunks Chunk Names
bundle.js 11.8 kB 0 [emitted] main
[0] ./runoob1.js 76 bytes {0} [built]
[5] ./runoob2.js 46 bytes {0} [built]
+ 4 hidden modules

沙发
LV是非 2021-3-12
无图无真相,补图找在线版主解锁

评论

登录后才可发表内容
  • 主题

    18

  • 帖子

    3835

  • 关注者

    0

Copyright © 2019 凯特网.   Powered by HYBBS 2.3.4  

Runtime:0.0882s Mem:2069Kb