配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法

2024-05-30 05:03:15

配置 postCSS 自动添加 css 的兼容前缀

① 运行 npm i postcss-loader autoprefixer -D 命令

② 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件

module.exports = {

plugins: [ autoprefixer ] // 挂载插件

}

③

在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：

module: {

rules: [

{ test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }

]

}

打包样式表中的图片和字体文件

① 运行 npm i url-loader file-loader -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {

rules: [

{

test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940'

}

]

}

其中 ? 之后的是 loader 的参数项。

limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

打包处理 js 文件中的高级语法

① 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D

② 安装babel语法插件相关的包：

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D

③ 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {

presets: [ '@babel/preset-env' ],

plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties’ ]

}

④ 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法相关推荐

webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
autoprefixer的应用实现保存代码自动添加css前缀
基于autoprefixer和postcss的jsAPI实现的保存自动添加css前缀的工具插件 1. 在开发node服务端项目时,使用不到webpack等打包构建工具,又想要添加css的前缀,可以使用 ...
Windows2008应用之配置客户端自动添加打印机
打印机对我们每一个人来说都是习以为常的东西了,给你一条远程打印机共享路径,你只要轻轻的双击想安装的打印机图标,等上个三五秒打印机就安装好,这台打印机就任你摆布了.但相对我们IT人员来说,全面的自动化将 ...
laravel项目中css样式表的背景图片不显示
刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
CSS基础外部样式表内嵌样式表行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
解决vue-cli build打包后CSS浏览器兼容前缀自动去除的问题
今天做练手项目部署的时候碰到了个奇怪问题,开发环境里显示得好好的CSS prefixer样式,到production环境就消失了. 我开发环境用的是 scss ,刚开始我还以为是 scss 处理器的问 ...
vue-cli build打包后CSS浏览器兼容前缀自动去除的问题
步骤一:在项目目录中运行(可以查看当前项目支持的浏览器列表) npx browserslist 步骤二:在 package.json 中修改 browserslist :(按照项目的兼容要求写) &q ...

最新文章

热门文章