课前准备：
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动态创建<style>标签来写入的，这就意味着样式代码已经编译在index.js文件里。但是实际业务中，可能并不希望这么做，因为随着项目的增大和样式的增多，js的体积会越来越大，而且不能做缓存。这是就需要用到webpack最后一个重要的概念——插件(plugins)，下一节我们会详细讲解插件的使用步骤和场景。
总结：
（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方法。
完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily
网友评论