webpack生产环境下的配置

css 处理

css提取

  1. 下载包

npm i -D mini-css-extract-plugin

  1. 配置
 module: {rules: [{test: /\.css$/,use: [// 'style-loader', // 创建style标签,将样式加入js文件MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件'css-loader',]}, ]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/budle.css'})],

css兼容性处理

  1. 下载包

npm i -D postcss-loader postcss-preset-env

  1. 配置

Webpack.config.js

 rules: [{test: /\.css$/,use: [// 'style-loader', // 创建style标签,将样式加入js文件MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件'css-loader',// css兼容性处理:postcss ---> postcss-loader  postcss-preset-env// 帮postcss找到package.json中的browerslist里面的配置,通过配置加载指定的css兼容性样式/*** "browserslist": {*   // 开发环境 --> 设置node环境变量: process.env.NODE_ENV = development 才能生效"development": ["last 1 chrome version","last 2 firefox version","last 1 safari version"],// 生产环境:默认看生产环境"production":["> 0.2%","not dead","not op_mini all"]}*/{loader: 'postcss-loader',options: {postcssOptions: {plugins:  ['postcss-preset-env']},}}]}, ]

package.json

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

压缩css

  1. 下载包

npm i css-minimizer-webpack-plugin -D

 plugins: [// 压缩cssnew CssMinimizerWebpackPlugin()
],

js压缩

  1. mode设置为生产模式即可,生产环境自动压缩js

mode: "production"

html压缩

plugins: [new HtmlWebpackPlugin({template: './src/index.html',minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true,}}),
]

eslint

  1. 下载包

npm i -D eslint eslint-webpack-plugin eslint-plugin-import eslint-config-airbnb-base

  1. 配置

Webpack.config.js

 plugins: [new ESLintWebpackPlugin({exclude: '/node_modules/',fix: true,})],

Package.json
根配置,配置eslint标准

"eslintConfig": {"extends": "airbnb-base"
}

js兼容

  1. 下载包

npm i -D babel-loader @babel/preset-env @babel/core @babel/polyfill core-js

  1. 配置
module: {rules: [{//  1. js兼容性处理: babel-loader @babel/core  @babel/preset-env//  问题:babel只能转换基础的语法,如promise则不能进行转换//  2. 全部兼容  @babel/polyfill//  问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大//  3. 需要做兼容性的处理就ok,按需加载---> core-jstest: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {// 预设: 指示babel做怎样的兼容性处理presets: [['@babel/preset-env',{useBuiltIns: 'usage', //按需加载corejs: {version: 3, // 指定core-js版本},targets: {  // 指定兼容浏览器版本chrome: '60',firefox: '60',ie: '9',safari: '10',edge: '17'}}]]}}]
}

在入口文件(src/index.js)引入@babel/polyfill

import '@babel/polyfill';

方案2和方案三选一种即可
方案2

module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {// 预设: 指示babel做怎样的兼容性处理presets: [['@babel/preset-env',]]}}]
}

在入口文件引入 @babel/polyfill

import '@babel/polyfill';

方案3

module: {rules: [{//  1. js兼容性处理: babel-loader @babel/core  @babel/preset-env//  问题:babel只能转换基础的语法,如promise则不能进行转换//  2. 全部兼容  @babel/polyfill//  问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大//  3. 需要做兼容性的处理就ok,按需加载---> core-jstest: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {// 预设: 指示babel做怎样的兼容性处理presets: [['@babel/preset-env',{useBuiltIns: 'usage', //按需加载corejs: {version: 3, // 指定core-js版本},targets: {  // 指定兼容浏览器版本chrome: '60',firefox: '60',ie: '9',safari: '10',edge: '17'}}]]}}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react 18中,使用useRef 获取其他组件的dom并操作节点,flushSync强制同步更新useState

React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行!这是故意的。Refs 是一种脱围机制,应该谨慎使用。手动操作 另一个 组件的 DOM 节点会使你的代码更加脆弱。 相反,想要 暴露其 DOM 节点的组件必须选择该行为。一个组件可以…

鹈鹕优化算法(POA)及其Python和MATLAB实现

鹈鹕优化算法(Pelican Optimization Algorithm,简称POA)是一种基于仿生学原理的优化算法,灵感来源于大自然中鹈鹕的觅食行为。POA被设计用于解决优化问题,尤其在连续型和离散型的优化问题中展现出了较好的性能。 ### …

单例模式-C#

在C#中实现单例模式,主要目的是确保一个类仅有一个实例,并提供一个全局访问点来获取这个实例。以下是一个简单的单例模式实现示例,它使用了一个私有静态变量来保存类的唯一实例,并提供了一个公有的静态方法来获取这个实例。此外&a…

【Unity C#基础】浅谈List底层逻辑

1.内部实现 List实际是通过数组来实现的,而不是链表。并且没设定初始容量的情况下,初始容量默认为0。 2.扩容 每次容量不够时,数组容量会扩充一倍。按照4、8、16、32、64、128、256……递增。 按照2的指数进行扩容可以为GC减少负担。 每…

CentOS 7 网络配置

如想了解请查看 虚拟机安装CentOS7 第一步:查看虚拟机网络编辑器、查看NAT设置 (子网ID,网关IP) 第二步:配置VMnet8 IP与DNS 注意事项:子网掩码与默认网关与 第一步 保持一致 第三步:网络配置…

客服新纪元:Transformer模型在自动化客户服务的革命性应用

客服新纪元:Transformer模型在自动化客户服务的革命性应用 随着人工智能技术的飞速发展,自动化客户服务已成为企业提升效率、降低成本的关键途径。Transformer模型,以其在处理序列数据方面的强大能力,正在自动化客户服务领域扮演…

掌握Xcode的魔术:自定义Storyboard的创建与管理

掌握Xcode的魔术:自定义Storyboard的创建与管理 在iOS应用开发中,Storyboard提供了一种直观的方式来设计和管理用户界面。通过Storyboard,开发者可以轻松地构建应用的视图控制器,同时定义它们之间的转换。然而,随着应…

用Pytorch实现线性回归(Linear Regression with Pytorch)

使用pytorch写神经网络的第一步就是需要准备好数据集,设计模型(用于计算y_hat(y的预测值)),构造损失函数和优化器(使用PyTorch API),写训练周期(前馈&#xf…

Centos7 rpm 安装 Mysql 8.0.28

Centos7 rpm 安装 Mysql 8.0.28 一、检查系统是否已经安装了Mysql 如果安装了则卸载 [rootiZbp1byzaznzn9jncxr010Z /]# rpm -qa | grep mysql[rootiZbp1byzaznzn9jncxr010Z /]# rpm -qa | grep mariadb mariadb-libs-5.5.68-1.el7.x86_64如果安装了 mysql ,maria…

2-36 基于matlab的流行学习算法程序

基于matlab的流行学习算法程序。通过GUI的形式将MDS、PCA、ISOMAP、LLE、Hessian LLE、Laplacian、Dissusion MAP、LTSA八种算法。程序以可视化界面进行展示,可直接调用进行分析。多种案例举例说明八种方法优劣,并且可设置自己数据进行分析。程序已调通&…

【12】奇偶数判断

奇偶数判断 题目描述 给定一个整数,判断该数是奇数还是偶数。如果 n n n 是奇数,输出 odd;如果 n n n 是偶数,输出 even。 输入格式 输入仅一行,一个整数 n n n。 输出格式 输出仅一行,如果 n n …

网络安全工作者如何解决网络拥堵

网络如同现代社会的血管,承载着信息的血液流动。然而,随着数据流量的激增,网络拥堵已成为不容忽视的问题,它像是一场数字世界的交通堵塞,减缓了信息传递的速度,扰乱了网络空间的秩序。作为网络安全的守护者…

vue2页面渲染 两个数据一行 怎么渲染

let data[“办公电脑”,“办公纸品”,“个护用品”,“销毁设备”,“桌面文具”,] 在 Vue 2 中,你可以使用 ​v-for​ 指令来遍历数据数组,并使用 CSS 来控制每行显示两个数据项。以下是一个简单的示例,展示了如何在 Vue 2 中实现这个需求&am…

Laravel速率限制:保护API的盾牌

Laravel速率限制:保护API的盾牌 在构建API时,速率限制(Rate Limiting)是一个关键的安全特性,它能够防止API被滥用或遭受恶意攻击。Laravel框架提供了一种简单而强大的机制来实现API速率限制,确保你的应用程…

C++ Primer:2.6 自定义数据结构

其他章节:C Primer 学习心得 类以关键字struct开始,紧跟着类名和类体(类体部分可以为空)。类体有花括号包围形成了一个新的作用域。内内部定义的名字必须唯一,可以与类外部定义的名字重复。 类体右侧表示结束的花括号…

通过路由上的参数生成唯一md5和路由上token做验证

前言:有这么一个场景,路由上有很多的参数,同时有一个token字段,通过路由上的mediaId,X-Test-Timestamp,ui_control 这三个字段生成一个md5值,然后和token要、做一个对比,看是否是通过这三个字段生成的token…

鸿蒙语言基础类库:【@system.brightness (屏幕亮度)】

屏幕亮度 说明: 从API Version 7 开始,该接口不再维护,推荐使用新接口[ohos.brightness]。本模块首批接口从API version 3开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import brightness from sy…

MVC、MVP和MVVM这三种设计模式的区别

详谈MVC、MVP 和 MVVM MVC、MVP 和 MVVM 这三种设计模式的区别1. 角色职责2. 数据绑定3. 性能和可测试性4. 复杂性5. 技术依赖6. 综合比较 总结如何选择 MVC、MVP 和 MVVM 这三种设计模式的区别 1. 角色职责 MVC 模型(Model):负责数据处理和…

【算法】LRU缓存

难度:中等 题目: 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,…

多级表头固定列问题

父级的width,是需要固定的列的width的总和 参考: el-table 多级表头下对应列的固定