[Node] Node.js Webpack和打包过程(二)

简介: [Node] Node.js Webpack和打包过程(二)

4 编写和打包CSS文件

css-loader的使用

Loader 可以用于对 模块的源代码 进行转换


我们可以将css文件也看成一个模块,我们通过import来加载这个模块


在加载这个模块时 webpack其实并不知道如何对其进行加载,必须要指定对应的loader来完成这个功能


我们需要一个什么样的loader?


对于加载css文件来说 我们需要一个可以读取css文件的loader  


这个loader最常用的是css-loader

CSS-loader的安装

JavaScript
npm install css-loader -D

CSS -loader 的使用方案

如何使用loader来加载css文件呢? 有三种方式:


1 内联方式:


在引入的样式前加上使用的loader,并使用!分割

JavaScript
import "css-loader!../css/style.css"

2 CLI方式(webpack5中不再使用)


已淘汰..


3 配置方式

loader配置方式

我们的webpack.config.js文件中写明配置信息:


module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)


这种方式可以更好的表示loader的配置 也方便后期的维护 同时也让你对各个loader有一个全局的概览


module.rules的配置如下:


rules属性对应的值是一个数组[Rule]


数组中存放的是一个个Rule,Rule是一个对象,对象中可以设置多个属性


test属性:用于对resource(资源)进行匹配,通常会设置正则表达式


use属性:对应的值是一个数组:[UseEntry]


UseEntry是一个对象 可以通过对象的属性来设置一些其他的属性


loader:必须有一个loader属性,对应的值是一个字符串


options:可选属性 值是一个字符串或对象,值会被传入loader中


query:目前已经使用options来替代;


传递字符串(如:use:['style-loader'])是loader属性的简写方式:(如:use[{loader:'style-loader'}])


loader属性:Rule.use:[{loader}]的简写

认识style-loader

可以通过css-loader来加载css文件了


但是发现 这个css在我们的代码中没有生效(页面没效果)


为什么呢?


因为css-loader只负责将.css文件进行解析,并不会将解析之后的css插入到页面中


如果我们希望再完成 插入 style的操作,我们还需要另外一个loader 就是 style-loader


安装 style-loader

JavaScript
npm install style-loader -D

配置style=loader

在配置文件中 添加 style-loader


注:因为loader的执行顺序是从右向左(或者说 从下到上,从后到前)所以我们需要将style-loader写到css-loader的前面

JavaScript
use:[
    // 注 style-loader写到css-loader的前面
    {loader:"style-loader"}
    {loader:"css-loader"}
]

5 编写和打包LESS文件

如何处理less文件?

在开发中 可能会使用less sass styus的预处理器 来编写css样式 效率更高


那么 如何让我们的环境支持这些预处理器?


首先我们需要确定less sass 等编写的css需要通过工具转换成普通css


如 下面编写的less样式:

CSS
@fontSize: 50px;
@fontColor:blue;
.title {
    font-size: @fontSize;
    color: @fontColor;
}

可以使用less-loader来处理


先使用less工具转换到css 再用style

JavaScript
npm install less-loader -D
JavaScript
{
    test:/\.less$/,
    use:["style-loader","css-loader","less-loader"]
}

6 postcss工具处理CSS

认识PostCSS工具

什么是PostCSS呢?


他是一个通过Js来转换样式的工具


可以帮助我们进行一些CSS的转换和适配 如 自动添加浏览器前缀,css样式的重置


实现这些功能 需要借助于PostCSS对应的插件


如何使用PostCSS呢? 分为两步:


一:查找PostCSS在构建工具中的拓展,如webpack和postcss-loader;


二:选择可以添加你需要的PostCSS相关的插件

Postcss-loader

可以借助于构建工具:


在webpack中使用postcss就是使用postcss-loader来处理


我们来安装postcss-loader:

JavaScript
npm install postcss-loader -D

我们修改加载css的loader:(配置文件过多,给出一部分了)


注:因为postcss需要有对应的插件才会起效果.所以我们需要配置它的plugin

JavaScript
{
    loader:"postcss-loader",
    options:{
        postcssOptions:{
            plugins:[
                require('abtoprefixer')
            ]
        }
    }
}

单独的postcss配置文件

因为我们需要添加前缀,所以要安装autoprefixer;


我们可以将这些配置信息放到一个单独的文件中进行管理


在根目录下创建postcss.config.js

JavaScript
module.exports = {
    plugins:[
        // require("autoprefixer")
        "autoprefixer"
    ],
}

postcss-preset-env

preset => 预设


事实上,在配置postcss-loader时 我们配置插件并不需要使用autpprefixer


我们可以使用另外一个插件:postcss-preset-env


postcss-preset-env也是一个postcss的插件


它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS 且会根据目标浏览器或者运行时环境添加所需的polyfill


也包括会自动帮助我们添加autoprefixer(相当于已经内置了autoprefixer)


首先 我们需要安装它

JavaScript
npm install postcss-preset-env -D

之后 我们直接修改之前的autoorefixer即可:

JavaScript
plugins:[
    "postcss-preset-env"
],
目录
打赏
0
0
0
0
5
分享
相关文章
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
55 1
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
839 1
|
13天前
Node安装版本低于工程版本时打包绕过校验
在开发中,若本地Node版本低于项目配置要求,导致打包报错(如图所示),可在不变更本地环境的情况下,通过在执行`npm run build`前输入命令`set NODE_OPTIONS=--openssl-legacy-provider`来绕行此问题,确保构建顺利进行。
35 10
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
55 9
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
121 0
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
37 1
JavaScript中的原型 保姆级文章一文搞懂
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等