webpack的加载器--处理css和less文件

webpack 默认只能处理 js 和 json 类型的文件，无法直接处理 css 和 less 等文件。在本文中会同大家分享如何使用 webpack 加载器来解决这个问题。

一、加载器 - 处理css文件

1. 初始化css环境

在 src 文件夹下创建 css 文件夹，并创建 css 文件，将创建好的 css 文件在入口文件中实现导入。因为要与入口产生关系，才会被 webpack 找到，并进行打包操作。

2. 安装依赖包

在终端输入指令安装 style-loader 和 css-loader。
其中，css-loader 让 webpack 能处理 css 类型文件；style-loader 是把 css 插入到 DOM 中。
style-loader文档
css-loader文档

npm add style-loader css-loader -D

3. webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    module: { 
        // loader的规则
        rules: [ 
          {
            test: /\.css$/, // 匹配所有的css文件
            // 在use数组中，是从右向左运行的
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

4. 运行打包

npm run serve

运行打包后在项目文件夹 dist/index.html 观察效果和css引入情况。
css文件被 webpack 打包，css 打包进 js 中，然后被嵌入在 style 标签插入 dom 上。

二、加载器 - 处理less文件

实现：less-loader 让 webpack 处理 less 文件，less 模块翻译 less 代码。

1. 初始化css环境

在 src 文件夹下创建 less 文件夹，并创建 less 文件，将创建好的 less 文件在入口文件中实现导入。

2. 安装依赖包

在终端输入指令安装 less-loader。

npm add less less-loader -D

3. webpack.config.js 配置

module: {
  // loader的规则
  rules: [ 
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

4. 运行打包

npm run serve

运行打包后在项目文件夹 dist/index.html 观察效果和 less 引入情况。

三、总结

尽管 webpack 默认只能处理 js 和 json 类型的文件，但是只要找到对应的 loader 加载器, 我们还是能让 webpack 处理不同类型文件的。
最后以最爱的组合照片结束今天的分享啦~ 新的一周大家一起加油冲冲冲！