2.2.3 使用webpack loader

àì夳堔傛蜴生んèń 2022-01-30 04:01 264阅读 0赞

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 文件即可。

[1240]: