课前准备：

webpack最重要的四个核心概念：入口(entry)、输出(output)、加载器(loaders)、插件(plugins)。

上一节我们搭建了一个简易的webpack工程，实现了本地启动项目的功能，了解了入口(entry)、输出(output)的基本使用方法，本节我们将一起探讨加载器loaders的使用方法。

在webpack的世界里，每个文件都是一个模块，比如：.css、.js、.html、.less、.scss、.jpg等，对于不同的模块，需要使用不同的加载器(loaders)来处理。通过安装不同的加载器可以对各种后缀的文件进行处理，比如写一些css样式，就要使用到style-loader、css-loader。

通过npm安装：npm install css-loader --save-dev

npm install style-loader --save-dev

或者合并来写npm install --save-dev css-loader style-loader

安装完成以后，在webpack.config.js内进行配置loaders，增加对.css文件处理：var config = {

//entry output省略

module: {

rules: [

{

test: /\.css$/,  //检测以.css为后缀的文件

use: ['style-loader', 'css-loader'] //使用相应的loaders对文件进行处理，注意顺序

}

]

}

};

module.exports = config;

在module.rules属性里可以指定一系列的loaders，每一个loader都必须包含一个test和use选项。上面的配置文件意思就是说：当webpack编译过程中遇到require()或者import语句导入一个以.css为后缀的文件时，先通过css-loader转换，再通过style-loader转换，然后继续打包。use选项的值可以是数组或者字符串，特别要注意的是，如果是数组，那么它的编译顺序就是从后往前。

在根目录下新建style.css，代码如下：#app {

color: red;

font-size: 20px;

}

在index.js中引入style.css，代码如下：import './style.css';

setTimeout(() => {

document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';

}, 5000);

重新执行npn run dev命令，启动成功以后发现页面已经出现了我们想要的效果：div#app内的字体颜色为红色，字体大小为20px。

打开Chrome控制台，检查页面元素发现：

index.html

css是通过javascript动态创建

总结：

(1)webpack四个核心思想：入口(entry)、出口(output)、加载器(loaders)、插件(plugins)。

(2)loaders是在webpack.config.js内的module.rules(数组类型)属性上配置的。

(3)每一个loader都要一个test选项和use选项，其中test通过一个正则表达式来判断不同后缀的文件，use使用一个字符串或者数组进行该后缀文件的处理方式——处理.css文件使用到了css-loader和style-loader，特别要注意的是如果use使用数组，那么loader的执行方式是从后往前。

(4)js文件引入css文件，可以使用require()或import方法。