loader接收资源文件源代码作为参数，并返回新的代码。比如，可以通过jsx-loader将React的JSX代码转换为JS代码，从而被浏览器执行。
以前端开发的CSS为例，为了将CSS资源添加到项目中，通常需要使用style-loader与css-loader。
style-loader：将CSS代码以<style>标签的形式插入到页面；
css-loader：通过检查CSS代码中的import语句找到依赖并合并；
- 首先在应用目录下生成package.json
npm init
- 安装loader对应的npm包：
npm install style-loader css-loader --save-dev
- 创建一个简单的CSS文件，index.css：
div {
width: 100px;
height: 100px;
background-color: red;
}
- 创建入口文件，index.js：
require('style-loader!css-loader!./index.css');
document.body.appendChild(document.createElement('div')); // 创建一个div，用以验证css是否生效
类似×××-loader!这样的写法是为了告诉webpack使用特定的loader对index.css的内容进行处理
webpack ./index.js bundle.js
浏览器中可以成功看到红色背景的div效果。
与常规的前端不同，最终页面并没有插入<link>标签，结果文件中也没有CSS文件，却通过引入一个JS文件实现了样式的引入。这正是webpack的特点之一，任何类型的模块（资源文件），理论上都可以通过被转化为JavaScript代码实现与其他模块的合并与加载。
这里通过JavaScript加载CSS正是借助了style-loader的能力（将CSS代码以<style>标签的形式插入到页面，标签内容通过JavaScript生成）。不过存在着样式内容生效时间被延后的缺点。
如果遵循前端页面优化建议，一般<link>插在页面的<head>中，而把<script>放在<body>最后。现在的做法中，样式内容其实与JavaScript一起加载的，它的插入与解析会被延迟到JavaScript内容的执行期。相比前者，生效时间不可避免地会晚很多，因而如果页面上有内容，这部分内容会有个短暂的无样式瞬间，用户体验不好。
这个缺点可以借助extract-text-webpack-plugin插件解决，在打包时将样式内容抽取并输出到额外的CSS文件中，然后在页面中直接引入结果CSS文件。
网友评论