webpack使用加载器来加载CSS样式

前言：

对于webpack来说，每个文件都是一个模块，比如css、js、html、jpg等。

对于不同的模块，就得需要不同的加载器(Loaders)来处理，所以加载器是webpack最重要的功能。

安装不同的加载器就可以对不同的后缀名的文件进行处理，比如现在要写一些CSS样式，就要用到style-loaedr和css-loader。

项目举例搭建教程：

​​javascript:void(0)​​

安装style-loader和css-loader:

进入到你的项目目录，并在此目录下打开cmd

下面通过npm 来安装它们。

输入：

npm install css- loader --save-dev

再输入：

npm install style-loader --save-dev

安装完成后，在webpack.config.js文件 里配置Loader，增加对.css文件的处理：

var path = require('path');
var config = {
 entry:{
  main:'./main'
 },
 output:{
  path:path.join(__dirname,'./dist'),
  publicPath:'/dist/',
  filename:'main.js'
 },
 module:{
  rules:[
   {
   test:/\.css$/,
   use:[
    'style-loader',
    'css-loader'
   ]
   }
  ]
 }

};

module.exports = config;

在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。

当webpack在编译过程中遇到require()或者import语句导入一个后缀为.css的文件时，先将它通过css-loader转换，再通过style-loader转换，然后才打包。

use选项这里是数组，它的编译顺序是从后往前，也可以是字符串。

在项目目录下新建一个style的文件，并在main.js中导入。

style.css

#app{
 font-size:24px;
 color:#f50;
}

main.js

import './style.css';

执行:

npm run dev

就可以看到页面中的文字已经改变了样式。