webpack——Loader示例：打包css文件

什么是Loader？

webpack通过扩展对应的loader以支持更多文件的转化，如scss，less转换成css；ES6转换为ES5代码等。大部分loader可以在webpack官网找到，并学习对应的用法。

loader的使用过程

1. 通过npm安装需要使用的loader

2.在webpack.config.js中的module关键字下配置

1.利用css-loader和style-loader给css文件打包 

项目中新建一个css文件夹，文件夹内新建normal.css文件：

body{
  background-color: aqua;
}

在webpack官网查询styling相关的loader并下载

npm install --save-dev css-loader
npm install --save-dev style-loader

在webpack.config.js文件进行module配置

const path = require('path') //node包里找路径

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname, 'dist'), //动态获取绝对路径
    filename:'bundle.js', //打包后的文件
  },
  module: {
    rules: [
      {
        test: /\.css$/i, //正则表达式查询所有css文件
        use: ["style-loader", "css-loader"], //读取从右往左，顺序颠倒打包会报错
        //css-loader只负责将css文件进行加载
        //style-loader负责渲染
      },
    ],
  },
}

终端使用命令npm run build进行打包，打包成功后可以看到html的body元素颜色被渲染

*踩坑

如果loader的下载版本过高时会出现如下报错：

此时降低css-loader与style-loader的版本等级即可打包成功。