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

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入