03

2024-07-15 00:20:07| 来源: 网络整理| 查看: 265

loader其实就是解析器，用来解析模块的，前面说到过webpack只认识js和json文件。配置方式如下：

module.rulesrules下放的是一个个的rule，一个rule对应一种解析规则。rule是一个对象，可设置多个属性： test：对于模块资源进行匹配，通常使用正则表达式use： loader：必须有一个loader，对应的值为一个字符串；options：可选属性，值为字符串或对象，值会被传到loader中。 loader：rule.ues的简写。处理css css样式

安装用来解析css的loader：npm i css-loader style-loader

在webpack的配置文件中使用配置css的解析规则：

module:{ rules:[ { test:/\.css$/, use:["style-loader","css-loader"] } ] }

经过上述操作我们就可以使用css了，下面进行css使用的测试：

在src下新建style目录，并在目录下编写index.css文件。

body, html { height: 100%; padding: 0px; margin: 0px; } #app { color: #1890FF; text-align: center; font-weight: 700; line-height: 100px; }

在index.js文件中引入index.css。

import './style/index.css'

重新执行npm run serve可以看到页面的字体的样式。（每次修改webpack的配置都需要重启服务）

使用less

安装解析less的loader：npm i less less-loader

编写less解析的规则

{ test:/\.less$/, use:["style-loader","css-loader","less-loader"] } 使用postCSS

PostCSS是一个通过JavaScript来转换样式的工具；这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；但是实现这些工具，我们需要借助于PostCSS对应的插件。

如何使用PostCSS 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader选择可以添加你需要的PostCSS相关的插件 postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的；安装：npm install postcss-loader autoprefixer -D

rules:[ { test:/\.css$/, use:["style-loader","css-loader",{ loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ require("autoprefixer") ] } } }] } ]

比如：**user-select: none;**会被打包为：

#app{ height:100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } postcss-preset-env

比autoprefixer更好用，可以把十六进制八位转为rgba。npm install postcss-preset-env -D

rules:[ { test:/\.css$/, use:["style-loader","css-loader",{ loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ require("postcss-preset-env") ] } } }] } ] postcss.config.js

将postcss的配置单独抽出来。

module.exports = { plugins:[ require('postcss-preset-env') ] } @import样式处理

在我们使用@import的时候，如果按照上述写法配置webpack则不会让postcss处理@import的CSS，因为是通过js去先找到当前的css由于@import是CSS语法，所以不会让postCSS解析，下面这个配置可以让其加载。

rules:[ { test:/\.css$/, use:["style-loader",{ loader:"css-loader", options:{ importLoaders:1 } },{ loader:"postcss-loader", // 可以在postcss.config.js里面配置 // options:{ // postcssOptions:{ // plugins:[ // require("autoprefixer") // ] // } // } }] } ] 封装style处理规则loader

因为关于style样式处理用相同的一部分，所以封装简写代码

const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const getCssLoaders = (loaders = []) => ( ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' , ...loaders]) module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: resolve(__dirname, './dist') }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ], mode: 'development', module: { rules: [ { test: /\.less$/, use: getCssLoaders([ 'less-loader']) }, { test: /\.css$/, use: getCssLoaders() } ] } } 处理图片svg资源 file-loader使用安装file-loader：npm i file-loader 文件的名称规则 [ext]：处理文件的扩展名；[name]：处理文件的名称；[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；[hash:]：截图hash的长度，默认32个字符太长了；[path]：文件相对于webpack配置文件的路径；配置规则{ test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: "[name].[hash:6].[ext]", outputPath:'img' } } ] } url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI

npm install url-loader -D但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；而大的图片也进行转换，反而会影响页面的请求速度；如何可以限制哪些大小的图片转换和不转换url-loader有一个options属性limit，可以用于设置转换的限制 { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'url-loader', options: { name: "img/[name].[hash:6].[ext]", limit: 100 * 1024 } } ] } 处理TS文件可以通过TypeScript的compiler来转换成JavaScript：npm install typescript -D另外TypeScript的编译配置信息我们通常会编写一个tsconfig.json文件tsc --init之后我们可以运行 npx tsc来编译自己的ts代码：npx tsc

需要安装全局的TypeScript环境，使用npm i -g typescript ,可以使用tsc -V查看版本。

使用ts-loader

如果我们希望在webpack中使用TypeScript，那么我们可以使用ts-loader来处理ts文件：npm install ts-loader -D

{ test: /\.ts$/, exclude: /node_modules/, use: "ts-loader" }

也可以使用@babel/tranform-typescript配合babel使用

【本文地址】

公司简介

联系我们

今日新闻

cssloaders

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

03

03

今日新闻

点击排行

推荐新闻

图片新闻

专题文章