webpack5 (四)

react-cli 中配置

开发环境

const path = require('path')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
//封装处理样式配置
const getStyleloaders = (pre)=>{return ['style-loader','css-loader',// 处理 css 兼容性问题//需要配合 package.json 中的browserslist 来指定兼容性做到什么程度{loader: 'postcss-loader',options: {postcssOptions: {plugins: 'postcss-preset-env'}}},pre].filter(Boolean)
};
//要用 commonjs的方式以对象的模式暴露出去
module.exports = {// 入口文件entry: './src/main.js',// 出口文件output: {path: undefined,filename: 'static/js/[name].js',chunkFilename: 'static/js/[name].chunk.js',assetModuleFilename: 'static/media/[hash:10][etx][query]'},// 配置loadermodule: {rules: [// 处理 css {test: /\.css$/,use: getStyleloaders()},{test: /\.less$/,use: getStyleloaders('less-loader')},{test: /\.s[ac]ss$/,use: getStyleloaders('sass-loader')},{test: /\.styl$/,use: getStyleloaders('stylus-loader')},// 处理 图片{test:/\.(jpe?g|png|gif|webp|svg)$/,type:'asset',parser:{dataUrlCondition:{maxSize:10*1024,}}},//处理其他资源{test:/\.(woff2?|ttf)$/,type:'asset/resource'},// 处理 js{test:/\.jsx?$/,include:path.resolve(__dirname,'../src'),loader:'babel-loader',//babel 也需要有一个 babel 的配置文件options:{catchDirectory:true,catchCompression:false,plugins:['react-refresh/babel',//用来解决react脚手架下 js不能热更新的问题]}}]},// 配置plugin// 处理html plugin:[//eslint 插件也是需要有自己的配置文件new EslintWebpackPlugin({context:path.resolve(__dirname,'../src'),exclude:'node_modules',cache:true,cacheLocation:path.resolve(__dirname,'../node_modules/.catch/.eslintcache'),}),new HtmlWebpackPlugin({template:path.resolve(__dirname,'../public/index.html'),}),new ReactRefreshWebpackPlugin()//用来解决react脚手架下 js不能热更新的问题],// 环境设置mode:'development',devtool:'cheap-module-source-map',optimization:{splitChunks:{chunks:'all'},runtimeChunk:{name:(entrypoint)=>`runtime~${entrypoint.name}.js`,}},//webpack 解析模块加载选项 // 解决运行react项目时报错 Module not found:Error:can't resolve './App' in 'xx/xxx/xxx/x'resolve:{//自动补全文件扩展名extentions:['.jsx','.js','json']},devServer:{host:'localhost',port:3000,open:true,hot:true,historyApiFallback:true,//解决前端路由刷新404问题}
}

生产模式

const path = require('path')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 生产模式下不需要激活热更新
// const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
// CSS提取为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css 压缩文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// js 压缩,使用css压缩后必须使用的插件
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 图片 压缩插件
const ImageMinimizerWebpackPlugin = require('image-minimizer-webpack-plugin')
// 如果出现 网站图标 需要用该复制插件将其复制到dist目录下
const CopyPlugin = require("copy-webpack-plugin");const getStyleloaders = (pre) => {return [// 'style-loader',MiniCssExtractPlugin.loader,//将style-loader替换为插件loader,打包为单独文件'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: 'postcss-preset-env'}}},pre].filter(Boolean)
};
module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, '../dist'),//设置出口文件路径filename: 'static/js/[name].[contenthash:10].js',//加入哈希值chunkFilename: 'static/js/[name].[contenthash:10].chunk.js',//加入哈希值assetModuleFilename: 'static/media/[hash:10][etx][query]',clean: true,//将上次打包内容清空},module: {rules: [{test: /\.css$/,use: getStyleloaders()},{test: /\.less$/,use: getStyleloaders('less-loader')},{test: /\.s[ac]ss$/,use: getStyleloaders('sass-loader')},{test: /\.styl$/,use: getStyleloaders('stylus-loader')},{test: /\.(jpe?g|png|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024,}}},{test: /\.(woff2?|ttf)$/,type: 'asset/resource'},{test: /\.jsx?$/,include: path.resolve(__dirname, '../src'),loader: 'babel-loader',options: {catchDirectory: true,catchCompression: false,// 生产模式下不需要激活热更新// plugins:[//     'react-refresh/babel',// ]}}]},plugin: [new EslintWebpackPlugin({context: path.resolve(__dirname, '../src'),exclude: 'node_modules',cache: true,cacheLocation: path.resolve(__dirname, '../node_modules/.catch/.eslintcache'),}),new HtmlWebpackPlugin({template: path.resolve(__dirname, '../public/index.html'),}),// new ReactRefreshWebpackPlugin(),// 生产模式下不需要激活热更新// css 打包为单独文件插件new MiniCssExtractPlugin({filename: 'static/css/name.[contenthash:10].css',chunkFilename: 'static/css/name.[contenthash:10].chunk.css'}),// 复制插件 处理public下其他资源 如网站图标new CopyPlugin({patterns: [// 设置从何处复制到何处{from: path.resolve(__dirname,'../public'),to: path.resolve(__dirname,'../dist')},],globOptions: {//设置忽略 index.html 文件ignore: ['**/index.html']}}),],mode: 'production', // 改为生产模式devtool: 'source-map',//使用 source-mapoptimization: {splitChunks: {chunks: 'all'},runtimeChunk: {name: (entrypoint) => `runtime~${entrypoint.name}.js`,},// 压缩插件放在 optimization 对象内minimizer: [new CssMinimizerWebpackPlugin(),//压缩 css 插件,new TerserWebpackPlugin(),//压缩 js 插件,//压缩图片插件,new ImageMinimizerWebpackPlugin({minimizerOptions: {plugins: [["gifsicle", { interlaced: true }],["jpegtran", { progressive: true }],["optipng", { optimizationLevel: 5 }],["svgo",{plugins: extendDefaultPlugins([{name: "removeViewBox",active: false,},{name: "addAttributesToSVGElement",params: {attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],},},]),},],],},}),]},resolve: {extentions: ['.jsx', '.js', 'json']},//生产模式不需要devsever// devServer:{//     host:'localhost',//     port:3000,//     open:true,//     hot:true,//     historyApiFallback:true,// }
}

合并配置

将生产模式和开发模式的配置进行合并,通过 process.env.NODE_ENV 的值来判断当前为生产环境还是开发环境。

const isProd = process.env.NODE_ENV ==='production'//三元判断 加载哪一个插件
isProd ? MiniCssExtractPlugin.loader : 'style-loader',//根据是否为生产模式来决定是否加载插件
plugins:[!isProd && 'react-refresh/babel',//用来解决react脚手架下 js不能热更新的问题
].filter(Boolean)

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

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

相关文章

Django REST framework中的序列化Serializers

序列化器允许将诸如查询集和模型实例之类的复杂数据转换为原生 Python 数据类型,然后可以将它们轻松地呈现为 JSON,XML 或其他内容类型。序列化器还提供反序列化,在首次验证传入数据之后,可以将解析的数据转换回复杂类型。 简单来…

无需租用云服务器:使用Linux本地搭建web服务并实现内网穿透发布公网访问的详细教程

文章目录 前言1. 本地搭建web站点2. 测试局域网访问3. 公开本地web网站3.1 安装cpolar内网穿透3.2 创建http隧道,指向本地80端口3.3 配置后台服务 4. 配置固定二级子域名5. 测试使用固定二级子域名访问本地web站点 前言 在web项目中,部署的web站点需要被外部访问,则…

NoSQL:非关系型数据库分类

NoSQL,全称 Not Only SQL,意为不仅仅是 SQL,泛指非关系型数据库。NoSQL 是基于键值对的,而且不需要经过 SQL 层的解析,数据之间没有耦合性,性能非常高。 非关系型数据库又可细分如下: 键值存储…

前端自动化部署,Devops,CI/CD

DevOps 提到 Jenkins,想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。 DevOps Development 和 Operations 的组合,是一种方法论,并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。…

前端包管理器:深入理解npm和yarn

引言 前端开发者们都知道,包管理器是我们日常开发中不可或缺的工具。在本文中,我们将深入探讨两个最常用的前端包管理器:npm (Node Package Manager) 和 Yarn。我们将通过一步步的操作,详细解释如何使用这两种工具,以…

Java on VS Code 8月更新|反编译器用户体验优化、新 Maven 项目工作流、代码高亮稳定性提升

作者:Nick Zhu 排版:Alan Wang 大家好,欢迎来到 Visual Studio Code for Java 的 8 月更新!在这篇博客中,我们将为您提供有关反编译器支持的更多改进。此外,我们将展示如何创建没有原型的 Maven 项目以及一…

TensorFlow是什么

TensorFlow是一个开源的深度学习框架,由Google开发,用于构建和训练神经网络。它提供了一种简单而灵活的方法来构建各种类型的机器学习模型,包括卷积神经网络、循环神经网络、深度神经网络等。TensorFlow使用图和张量的概念来描述计算流程。 …

【C语言】字符函数,字符串函数,内存函数

大家好!今天我们来学习C语言中的字符函数,字符串函数和内存函数。 目录 1. 字符函数 1.1 字符分类函数 1.2 字符转换函数 1.2.1 tolower(将大写字母转化为小写字母) 1.2.2 toupper(将小写字母转化为大写字母&…

SpringMVC之入门

目录 1.SpringMVC工作流程 2.SpringMVC核心组件 2.1 DispatcherServlet 2.2 HandlerMapping 2.3 Handler 2.4 HandlerAdapter 2.5 ViewResolver 2.6 View 3.SpringMVC的入门 3.1 添加相关依赖 3.2 创建Spring-mvc.xml 3.3 配置web.xml 3.4 效果演示 4.静态资源处…

ios 运行ipa包 日志查看方式

方法一: 使用ideviceinstaller工具 # 安装ipa命令 brew install ideviceinstaller ideviceinstaller -i xxx.ipa# 查看运行日志 idevicesyslog# idevicesyslog 查找命令 idevicesyslog | grep test -A 3 -B 2 # 输出关键字所在行后3行,前2行) idevic…

每日一道面试题之什么是上下文切换?

上下文切换是指在计算机操作系统中,当多个进程或线程同时运行时,系统需要将当前运行进程或线程的状态(包括程序计数器、寄存器值、内存映像等)保存起来,然后切换到另一个进程或线程继续执行的过程。上下文切换通常由操…

GeoServe Web管理界面远程访问GeoServe Web管理界面的最佳工具

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现,利用GeoServer可以方便地发布地图数据,允许用户对要素数据进行更新、删除、插入…

5 | Java Spark WordCount打成Jar 包测试

步骤 1:准备 WordCount 代码 首先,确保 编写了 WordCount 代码,已经提供了正确的输入文件路径。 package com.bigdata;import org.apache.spark.SparkConf; import org.apache.spark.api.java.

golang操作数据库--gorm框架、redis

目录 1.数据库相关操作(1)非orm框架①引入②初始化③增删改查 (2) io版orm框架 (推荐用这个)①引入②初始化③增删改查④gorm gen的使用 (3) jinzhu版orm框架①引入②初始化③增删改查 2.redis(1)引入(2)初始化①普通初始化②v8初始化③get/set示例 1.数据库相关操作 (1)非orm…

AJAX学习笔记4解决乱码问题

AJAX学习笔记3练习_biubiubiu0706的博客-CSDN博客 在Tomcat10来说,AJAX GET或者POST接收响应都不存在乱码问题 对于Tomcat9来说 前端测试代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>测试A…

数据库-多表查询

概述&#xff1a; 介绍&#xff1a;多表查询&#xff1a;指从多张表中查询数据 笛卡儿积&#xff1a;笛卡儿积是指在数学中&#xff0c;两个集合&#xff08;A集合和B集合&#xff09;的所有组合情况&#xff08;在多表查询时&#xff0c;需要消除无效的笛卡儿积&#xff09; 分…

excel中的引用与查找函数篇1

1、COLUMN(reference)&#xff1a;返回与列号对应的数字 2、ROW(reference)&#xff1a;返回与行号对应的数字 参数reference表示引用/参考单元格&#xff0c;输入后引用单元格后colimn()和row()会返回这个单元格对应的列号和行号。若参数reference没有引用单元格&#xff0c;…

传输层—TCP原理详解

目录 前言 1.TCP协议 2.TCP协议段格式 3.如何解包如何分用 4.网络协议栈和文件的关系 5.如何理解TCP报头 6.TCP的特点 7.TCP字段 7.1 16位窗口大小 7.2标志位 8.超时重传 9.连接管理机制 10.滑动窗口 11.拥塞控制 12.延迟应答 13.捎带应答 14.理解TCP的面向字…

【C++】Visual Studio EditorConfig 格式设置

【C】Visual Studio EditorConfig 格式设置 文章目录 【C】Visual Studio EditorConfig 格式设置I - EditorConfig1.1 - 通用设置indent_styleindent_sizetab_widthend_of_linecharsettrim_trailing_whitespaceinsert_final_newline II - Visual Studio 特定键值缩进设置cpp_in…

蚂蚁集团SQLess 开源,与内部版有何区别?

当我们使用关系型数据库时&#xff0c;SQL 是联系起用户和数据库的一座桥梁。 SQL 是一种高度非过程化的语言&#xff0c;当我们在编写SQL 时&#xff0c;表达的是想要什么数据&#xff0c;而不是怎么获取数据。因此&#xff0c;我们往往更关心SQL 有没有满足业务逻辑&#xff…