webpack打包css和less文件

1. 前言

webpack是不能直接处理 css 、less、图片等资源的，需要使用对应的 loader ，有关loader的介绍请查看这篇博客 webpack中的loader

2. 打包css文件

目录结构（本案例的演示代码在页面底部有下载链接）
在这里插入图片描述
（1）项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。在src目录中，创建一个css文件夹，其中创建一个normal.css文件。

body {
    
    
  /*normal.css中的代码非常简单，就是将body设置为blue*/
  background-color: blue;
}

但是，这个时候normal.css中的样式会生效吗？

不会。因为我们就没有引用它。
webpack也不可能找到它，因为我们只有一个入口，而webpack会从入口开始查找其他依赖的文件。

打包的时候，只有打包入口文件依赖的文件才会进行打包。如果依赖的文件又依赖了其他的文件，webpack会自动处理。如果创建了一个新的文件，比如css文件，但是并没有任何其它文件依赖新创建的文件，那么这个文件不会被打包进去。

（2）接下来我们在 mian.js 入口文件导入 normal.css 文件

// 依赖css文件，css文件也可以被当做一个模块来处理。
// 由于我们只要依赖css文件就可以了，并不需要用一个变量来接收
require('./css/normal.css')

重新进行打包，发现报错了，提示我们需要安装一个合适的loader：

在这里插入图片描述
（3）查阅 webpack 官网 https://www.webpackjs.com/loaders/css-loader/，发现我们需要安装 css-loader 和 style-loader ，使用命令 npm install --save-dev xxx （xxx替换为对应loader的名字）

然后需要在 webpack.config.js 文件中进行一些配置

let path = require('path');

module.exports = {
    
    
  entry: './src/main.js',              //打包入口
  output: {
    
                                //出口
    path: path.join(__dirname,'dist'),
    filename: 'bundle.js'
  },
  module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中，要放在css-loader的前面
        // webpack在使用多个loader时，是按照从右向左（或者说从下到上）的顺序使用
        use:['style-loader','css-loader']
      }
    ]
  }
}

接下来重新打包，发现打包成功，dist 文件夹下就多了一个 bundle.js 文件，我们只需要在 html 文件中引入这个 bundle.js 文件即可。

3. 打包less文件

（1）先创建一个special.less文件，依然放在css文件夹中

@fontSize:50px;
@fontColor:orange;

body {
    
    
  font-size:@fontSize;
  color: @fontColor;
}

（2）在入口文件main.js文件中引入

require('./css/special.less')

（3）查阅官网 https://www.webpackjs.com/loaders/less-loader/ 打包less文件需要安装对应的loader，less-loader

npm install --save-dev less-loader less

（4）修改 webpack.config.js 配置文件，加入对应的 less-loader 的配置

module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader" // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader" // compiles Less to CSS
        }]
      }
    ]
  }

4. 资料

本博客的演示代码下载链接 https://webchang.lanzous.com/i6bFtkflaef 密码:2h4i
webpack中文网 - loader
博客 webpack中的loader的介绍
提示：在使用webpack的loader的过程中可能会遇到版本的问题，要注意一下，可以看这篇博客 https://blog.csdn.net/weixin_43974265/article/details/112667927