由浅入深学习webpack+vue全家桶，实现知乎日报--web

课前准备：

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