webpack 打包配置

主要实现功能

  • 处理html、css、js、vue、jsx、图片等文件
  • 压缩处理好的文件
  • 分割压缩好的文件
  • 路由懒加载
  • 开启缓存和热更新
  • 开启多线程打包

新建【webpack.config.js】

  • 新建【webpack.dev.js】开发打包配置
  • 新建【webpack.prod.js】生产打包配置
  • 新建【webpack.config.js】,合并开发和生产配置,并根据打包命令的指定环境变量的值,判断使用何种配置

目录结构

const xxx = require("xxx")module.exports ={entry:"",output:{},module:{},plugins:[],optimization:{},resolve:{},devServer{},mode:,devtool:,performance:,...
}

详细解析

//引入相关依赖、npm下载的插件、库
const xxx = require("xxx")//接收【package.json】中【script】所运行的脚本命令指定的环境变量
const isP = process.env.NODE_ENV === "production";//提取下面相同配置,进行复用,减少代码体积【如css、less、scss】
//【.filter(Boolean)】过滤没有参数时,产生的undefined
const xxx = (xxx) =>{  return[xxx].filter(Boolean);  }module.exports ={//打包入口文件entry:"./src/main.js",//指定输出的文件output:{//输出的目录path:'',//输出的文件名,携带路径filename:'',//输出的chunk文件名,携带路径chunkFilename:'',//输出的图片等资源文件名,携带路径assetModuleFilename:''},module:{//处理html、css、js、jsx、vue、图片等的规则 rules:[ {  }, { }...  ]},plugins:[],		//插件的使用optimization:{},	//压缩、代码分割resolve:{},		//webpack解析模块加载选项devServer{},		//开发模式自动化配置mode:,			//开发环境变量devtool:,			//生成代码映射模式,辅助开发performance:,		//性能分析...
}
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");// 需要通过 cross-env 定义环境变量
const isProduction = process.env.NODE_ENV === "production";const getStyleLoaders = (preProcessor) => {return [isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader","css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env"],},},},preProcessor,].filter(Boolean);
};module.exports = {entry: "./src/main.js",output: {path: isProduction ? path.resolve(__dirname, "../dist") : undefined,filename: isProduction? "static/js/[name].[contenthash:10].js": "static/js/[name].js",chunkFilename: isProduction? "static/js/[name].[contenthash:10].chunk.js": "static/js/[name].chunk.js",assetModuleFilename: "static/js/[hash:10][ext][query]",clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders("less-loader"),},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader"),},{test: /\.styl$/,use: getStyleLoaders("stylus-loader"),},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",},{test: /\.(jsx|js)$/,include: path.resolve(__dirname, "../src"),loader: "babel-loader",options: {cacheDirectory: true,cacheCompression: false,plugins: [// "@babel/plugin-transform-runtime" // presets中包含了],},},// vue-loader不支持oneOf{test: /\.vue$/,loader: "vue-loader", // 内部会给vue文件注入HMR功能代码options: {// 开启缓存cacheDirectory: path.resolve(__dirname,"node_modules/.cache/vue-loader"),},},],},plugins: [new ESLintWebpackPlugin({context: path.resolve(__dirname, "../src"),exclude: "node_modules",cache: true,cacheLocation: path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),}),new HtmlWebpackPlugin({template: path.resolve(__dirname, "../public/index.html"),}),new CopyPlugin({patterns: [{from: path.resolve(__dirname, "../public"),to: path.resolve(__dirname, "../dist"),toType: "dir",noErrorOnMissing: true,globOptions: {ignore: ["**/index.html"],},info: {minimized: true,},},],}),isProduction &&new MiniCssExtractPlugin({filename: "static/css/[name].[contenthash:10].css",chunkFilename: "static/css/[name].[contenthash:10].chunk.css",}),new VueLoaderPlugin(),new DefinePlugin({__VUE_OPTIONS_API__: "true",__VUE_PROD_DEVTOOLS__: "false",}),].filter(Boolean),optimization: {minimize: isProduction,// 压缩的操作minimizer: [new CssMinimizerPlugin(),new TerserWebpackPlugin(),new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [["gifsicle", { interlaced: true }],["jpegtran", { progressive: true }],["optipng", { optimizationLevel: 5 }],["svgo",{plugins: ["preset-default","prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical",},},],},],],},},}),],splitChunks: {chunks: "all",},runtimeChunk: {name: (entrypoint) => `runtime~${entrypoint.name}`,},},resolve: {extensions: [".vue", ".js", ".json"],},devServer: {open: true,host: "localhost",port: 3000,hot: true,compress: true,historyApiFallback: true, // 解决vue-router刷新404问题},mode: isProduction ? "production" : "development",devtool: isProduction ? "source-map" : "cheap-module-source-map",
};
  • 如项目较大,可开启多进程打包,开启多进程耗费时间,项目小不考虑

  • Preload / Prefetch懒加载技术,兼容性不好,需考虑浏览器和用户群体

  • PWA:项目离线还可以通过缓存使用,存在兼容性问题

安装依赖

  • 写入【package.json】即可npm i一键安装,但是会存在版本问题
  • 需要查看【webpack.config.js】具体使用的,单独安装【推荐】
@babel/core
@babel/eslint-parser
@vue/cli-plugin-babel
babel-loader
copy-webpack-plugin
cross-env
css-loader
css-minimizer-webpack-plugin
eslint-plugin-vue
eslint-webpack-plugin
html-webpack-plugin
image-minimizer-webpack-plugin
imagemin
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng
imagemin-svgo
less-loader
mini-css-extract-plugin
postcss-preset-env
sass-loader
stylus-loader
vue-loader
vue-style-loader
vue-template-compiler
webpack
webpack-cli
webpack-dev-server

修改【package.json】

​ 配置【scripts】脚本命令和【browserslist】浏览器适应规则

{"scripts": {"start": "npm run dev","dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js","build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"},"browserslist": ["last 2 version", "> 1%", "not dead"]}

新建【.eslinter.js】

使用Vue官方和Eslint官方推荐的配置即可,可根据团队需求调整

module.exports = {root: true,env: {  node: true,  },extends: ["plugin:vue/vue3-essential","eslint:recommended"],parserOptions: {  parser: "@babel/eslint-parser" },
};

新建【babel.config.js】

使用vue预设,即可

module.exports = {presets: ["@vue/cli-plugin-babel/preset"],
};

总结

生产打包完,首次运行非首页,会出现404,原因是没有用上webpack-devServer的配置,后期项目上线部署,如通过nginx上线部署,可通过nginx配置解决

参考视频地址:https://www.bilibili.com/video/BV14T4y1z7sw

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

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

相关文章

Spring Boot中的事务管理策略

Spring Boot中的事务管理策略 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将深入探讨在Spring Boot应用中的事务管理策略,以及如何通过合…

评估大型语言模型生成文章的能力

1. AI解读 1.1. 总体概要 本文探讨了大型语言模型(LLMs)如GPT-4在生成特定领域(如计算机科学中的自然语言处理NLP)教育调查文章方面的能力和局限性。研究发现,尽管GPT-4能够根据特定指导生成高质量的调查文章&#x…

Pytorch中torch.cat()函数的使用及说明

如果你有两个形状为 (3, 4) 的tensor A 和 B,并且你想要在第一个维度上连接它们,你可以这样做: import torchA torch.randn(3, 4) B torch.randn(3, 4) C torch.cat([A, B], dim0) # dim0 表示在第一个维度上连接 此时 C 的形状将会是 …

kafka consumer客户端消费逻辑解析

kafka consumer客户端消费逻辑解析 一、主要消费步骤二、提交策略【步骤2代码解析】【提交策略总结】 三、拉取策略(待补充)四、消费策略【代码解析】【消费策略总结】 一、主要消费步骤 这是kafka客户端拉取消息的入口,有4个主要部分 1、启…

【Rust】function和methed的区别

文章目录 functionmethedAssociated Functions 参考资料 一句话总结: function和methed很多都是相同的。 不同点在于: methed定义在结构体里面,并且它的第一个参数肯定是self,代表结构体实例。方法需要用实例名.方法名调用当然结…

苏东坡传-读书笔记三

苏东坡去世之后,一黄某获得苏东坡一珍贵的手稿,其中有苏东坡下列的名句: “处贫贱易,处富贵难。安劳苦易,安闲散难。忍痛易,忍痒难。人能安闲散,耐富贵,忍痒,真有道之士也…

三生随记——暗夜诊所

在偏远的小镇边缘,矗立着一座看似普通的诊所。这座诊所历史悠久,据传已经存在了几十年,但关于它的具体来历和背后的故事,却鲜有人知。它的外表看似破旧不堪,但内部却异常整洁,散发着一种神秘而诡异的气息。…

vCenter-vAPI-Endpoint service health shows as Yellow

- 问题摘要:vAPI-Endpoint service health shows as Yellow - 解决方案/工作方法: 使用命令重启vAPI Endpoint service后该服务运行正常。 service-control --stop vmware-vapi-endpoint service-control --start vmware-vapi-endpoint VMware KB&…

详细分析Oracle修改默认的时间格式(四种方式)

目录 前言1. 会话级别2. 系统级别3. 环境配置4. 函数格式化5. 总结 前言 默认的日期和时间格式由参数NLS_DATE_FORMAT控制 如果需要修改默认的时间格式,可以通过修改会话级别或系统级别的参数来实现 1. 会话级别 在当前会话中设置日期格式,这只会影响…

uni-app (通过HBuilderX 和 VS Code 开发)详细连接过程教学。

使用 HBuilderX 创建 uni-app 项目 并编译到微信开发者工具。 uni-app 支持两种方式创建项目: 通过 HBuilderX 创建 通过命令行创建 首先我们需要先下载HBuilderX 下载链接地址:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的登山之旅01(100分)- 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 &#x1f…

如何在 HTML 中实现响应式设计以适应不同设备的屏幕尺寸?

要在HTML中实现响应式设计以适应不同设备的屏幕尺寸,可以使用CSS媒体查询和流动布局。 以下是实现响应式设计的一些关键步骤: 使用CSS媒体查询:CSS媒体查询允许根据屏幕尺寸和设备特性应用不同的CSS样式。通过在CSS中使用media规则&#xf…

第四十一章 使用 二进制 SOAP 格式

文章目录 第四十一章 使用 二进制 SOAP 格式介绍扩展 Web 服务的 WSDL 第四十一章 使用 二进制 SOAP 格式 数据平台 SOAP 支持提供了可选的专有二进制 SOAP 格式,当发送和接收大型 SOAP 消息并希望最小化消息大小时,该格式非常有用。 Web 服务可以接收…

js文件的执行和变量初始化缓存

js文件和变量初始化 全局变量举例js文件加载 全局变量举例 import * as turf from "turf/turf"; import earcut from "earcut"; import * as THREE from "three"; import { TextGeometry } from "three/addons/geometries/TextGeometry.js…

《梦醒蝶飞:释放Excel函数与公式的力量》6.4 TODAY函数

第四节:6.4 TODAY函数 1)TODAY函数概述 TODAY函数是Excel中一个非常有用的内置函数,它返回当前的日期。与NOW函数不同,TODAY函数仅返回日期部分,时间部分默认为午夜(0:00)。 2)函…

[数据质量]手动实现 阿里云DataWorks 的数据质量监控告警功能

目录 手动实现 DataWorks 的数据质量监控告警功能1. 简介:2. 数据表准备2.1 tmp_monitor_tbl_info (数据监控信息表)2.2 tmp_monitor_rule_info (数据质量监控规则表)2.3 tmp_monitor_tbl_info_log_di (数据监控信息记录表) 3. 程序开发3.1 数据检查程序3.2 告警信息推送程序3.…

Jenkins教程-10-发送飞书测试报告通知

上一小节我们学习了发送企业微信测试报告通知的方法,本小节我们讲解一下发送飞书测试报告通知的方法。 1、自动化用例执行完后,使用pytest_terminal_summary钩子函数收集测试结果,存入本地status.txt文件中,供Jenkins调用 conft…

MyBatis(9)MyBatis 的一级缓存和二级缓存的区别

MyBatis 提供了两级缓存机制:一级缓存(Session级别)和二级缓存(全局级别),以提高应用的性能通过减少数据库的查询次数。 一级缓存(Session级别) 一级缓存是基于 SQL 会话&#xff…

优化 C# 和 .NET Core Web API 中的 LINQ 查询

LINQ(语言集成查询)是 C# 中的一项强大功能,允许开发人员以可读且简洁的方式查询和操作数据。但是,LINQ 的使用效率低下可能会导致性能瓶颈,尤其是在处理 .NET Core Web API 中的大型数据集时。优化 LINQ 查询对于维护…

嵌入式 Linux 设备刷系统具体组成

嵌入式 Linux 设备刷系统具体组成 1 介绍1.1 概述1.2 嵌入式 Linux 的组成1.3 U-Boot1.4 Linux 内核1.5 设备树1.6 根文件系统 参考 1 介绍 1.1 概述 一个完整的 linux 系统,通常包含了 U-Boot、kernel、设备树以及根文件系统。 1.2 嵌入式 Linux 的组成 1.3 U-…