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 官网 /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)查阅官网 /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. 资料
本博客的演示代码下载链接 /i6bFtkflaef 密码:2h4iwebpack中文网 - loader博客 webpack中的loader的介绍提示:在使用webpack的loader的过程中可能会遇到版本的问题,要注意一下,可以看这篇博客 /weixin_43974265/article/details/112667927前端学习交流QQ群,群内学习讨论的氛围很好,大佬云集,期待您的加入:862748629 点击加入
如果觉得《webpack打包css和less文件》对你有帮助,请点赞、收藏,并留下你的观点哦!