frame中src怎么设置成一个变量

摘要：这个时代对速度和性能要求越来越高，前端开发中兼容性问题是一个让人头疼的问题，也许在这台设备上明明好好的，但是换一个设备就会让人哭笑不得，对于用户体验和流量资源的开销也是要考虑的一个问题，当下我们正在学习的webpack在这方面有着怎样的措施呢？这里我们将从对Css的处理说起。

大纲：

从js中提取css成单独的文件
Css的兼容性问题处理
Css文件的压缩

一、CSS文件的提取

安装插件npm install --save-dev mini-css-extract-plugin
webpack.config.js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /.css$/,use: [// 创建style标签，将样式放入// 'style-loader', // 这个loader取代style-loader。作用：提取js中的css成单独文件MiniCssExtractPlugin.loader,// 将css文件整合到js文件中'css-loader']}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({// 对输出的css文件进行重命名filename: 'css/built.css'})],mode: 'development'
};

3. html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

4. css文件

//a.css
#box1 {width: 100px;height: 100px;background-color: pink;
}//b.css
#box2 {width: 100px;height: 100px;background-color: pink;
}

5. 入口文件index.js

import '../css/a.css';
import '../css/b.css';

6. 测试结果

二、兼容性处理

安装npm install --save-dev postcss-loader postcss-preset-env
配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',/*css兼容性处理：postcss --> postcss-loader postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式"browserslist": {// 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],// 生产环境：默认是看生产环境"production": [">0.2%","not dead","not op_mini all"]}*/// 使用loader的默认配置// 'postcss-loader',// 修改loader的配置{loader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [// postcss的插件require('postcss-preset-env')()]}}]}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'})],mode: 'development'
};

3. package.json中添加browserslist的配置

官方参考地址：https://github.com/browserslist/browserslist

 "browserslist": {"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.2%","not dead","not op_mini all"]}

4. 测试：

三、压缩

安装npm install --save-dev optimize-css-assets-webpack-plugin
配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [// postcss的插件require('postcss-preset-env')()]}}]}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'}),// 压缩cssnew OptimizeCssAssetsWebpackPlugin()],mode: 'development'
};

3. 其他的文件和上面一样

4. 测试：

frame中src怎么设置成一个变量_webpack中Css的处理相关推荐

frame中src怎么设置成一个变量_在 Figma 中如何选择 group（组）或 frame（画框）？...
导读:在 Figma 中可以使用 group(组)或 frame(画框)来组织元素,但它们又有一些不同.合理地选择如何使用它们,能够帮助我们更好地设计.本文来自 Figma 官方博客,由卓浩翻译. 你 ...
frame中src怎么设置成一个变量_自动格式化打印变量HMLog介绍
作者 | mao2020 来源 | 掘金,点击阅读原文查看作者更多文章前言在我初学iOS的时候,经常需要NSLog打印用于调试,有时候还需要打印多个变量: NSLog(@"xxxx fr ...
frame中src怎么设置成一个变量_Go 语言设计哲学之七：变量声明须一致
Go 语言,使用变量之前需要先进行变量的声明. var s string = "Golang"n := 666 Go 语言有两类变量包级别(package varible):在 ...
frame中src怎么设置成一个变量_OpenCV图像人脸检测及视频中的人脸检测（附源码）...
文章目录一.数据和知识准备 1. 下载HAAR与LBP数据 2. opencv相关知识二.python+opencv实现人脸检测 1. 图像单人脸检测 2. 图像多人脸检测 3. 视频中人脸检测 ...
已知某班学生的英语成绩按学号(从1开始)从小到大的顺序排列在tab表中，要查的学生学号放在变量no中，查表结果放在变量english中。
已知某班学生的英语成绩按学号(从1开始)从小到大的顺序排列在tab表中, 要查的学生学号放在变量no中,查表结果放在变量english中. data segmenttab db 68,78,42,84 ...
python中函数可以赋值给一个变量_python中函数赋值给变量时的问题注意详解
变量赋值是我们在日常开发中经常会遇到的一个问题,下面这篇文章主要给大家介绍了关于python中将函数赋值给变量时需要注意的一些问题,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的 ...
【VMware】虚拟机中给Linux设置ip——解决在linux中设置了ip地址，却还是连不上的问题
大家好,我是好学的小师弟,最近在搭建虚拟机的时候,发现我虽然在linux中设置了ip地址却还是用MobaXterm连不上.后来查询相关文档,解决了该问题进入虚拟机,点击编辑-虚拟网络编辑器进入到N ...
VMware中的虚拟机设置开启VT虚拟化虚拟机中创建虚拟机
打开虚拟机设置,编辑处理器,勾选虚拟化引擎
matlab中for循环设置二维数组,MATLAB中定义赋值一个二维数组
MATLAB中定义赋值一个二维数组答: 分号:; 因特网能提供的最基本服务答:E-mail, WWW, FTP 劳动合同中,用人单位给予劳动者低于当地工资最低水平的违反了()合法原则答:内容合法 ...

frame中src怎么设置成一个变量_webpack中Css的处理

大纲：

一、CSS文件的提取

二、兼容性处理

三、压缩

frame中src怎么设置成一个变量_webpack中Css的处理相关推荐

最新文章

热门文章