Webpack5入门到原理14:生产模式介绍

生产模式是开发完成代码后,我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化,让其运行性能更好。

优化主要从两个角度出发:

优化代码运行性能
优化代码打包速度

生产模式准备

我们分别准备两个配置文件来放不同的配置

1. 文件目录

├── webpack-test (项目根目录)├── config (Webpack配置文件目录)│    ├── webpack.dev.js(开发模式配置文件)│    └── webpack.prod.js(生产模式配置文件)├── node_modules (下载包存放目录)├── src (项目源码目录,除了html其他都在src里面)│    └── 略├── public (项目html文件)│    └── index.html├── .eslintrc.js(Eslint配置文件)├── babel.config.js(Babel配置文件)└── package.json (包的依赖管理配置文件)

2. 修改 webpack.dev.js

因为文件目录变了,所以所有绝对路径需要回退一层目录才能找到对应的文件

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: undefined, // 开发模式没有输出,不需要指定输出目录filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出,不需要清空输出结果},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 其他省略devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: "development",
};

运行开发模式的指令:

npx webpack serve --config ./config/webpack.dev.js

3. 修改 webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "../dist"), // 生产模式需要输出filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// devServer: {//   host: "localhost", // 启动服务器域名//   port: "3000", // 启动服务器端口号//   open: true, // 是否自动打开浏览器// },mode: "production",
};

运行生产模式的指令:

npx webpack --config ./config/webpack.prod.js

4. 配置运行指令

为了方便运行不同模式的指令,我们将指令定义在 package.json 中 scripts 里面

// package.json
{// 其他省略"scripts": {"start": "npm run dev","dev": "npx webpack serve --config ./config/webpack.dev.js","build": "npx webpack --config ./config/webpack.prod.js"}
}

以后启动指令:

  • 开发模式:npm start 或 npm run dev
  • 生产模式:npm run build

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

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

相关文章

求助帖(setiosflags)的左右对齐问题:

以后自己要注意,如果两个相互矛盾的标志同时被设置,如先设置 setiosflags(ios::right),然后又设置 setiosflags(ios::left),那么结果可能就是两个标志都不起作用。因此,在设置了某标志,又要设置其他与之矛盾…

RabbitMQ-生产者可靠性

一、生产者重连 1、概念 由于网络波动导致客户端无法连接上MQ,这是可以开启MQ的失败后重连机制。 注意: 是连接失败的重试,而不是消息发送失败后的重试。 2、开启配置 spring:rabbitmq:template:retry:enabled: true # 是否启用重试机制ma…

尝试计算π的值,并统计π的小数部分中每个数字出现的次数,当所有数字出现次数相等时停止计算

from mpmath import mp # 设置π的精度 mp.dps 100000 # 设置所需精度 # 初始化计数器 digit_counts [0] * 10 # 开始尝试计算并统计 for i in range(1, mp.dps 1): # 获取当前精度的π值 pi_str str(mp.pi)[2:] # 跳过"3." # 统计各数字出现次数 …

【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《RabbitMQ实战》。🎯🎯 &am…

java实现红黑树

红黑树 红黑树是一种自平衡二叉查找树,其中每个节点都有一个颜色属性,颜色为红色或黑色。它的特性保证了树在插入和删除操作后仍然保持大致的平衡,使得查找操作能够在对数时间内完成。以下是红黑树的一些基本性质: 每个节点是红…

JS 数组对象的 34 种官方用法

数组(Array)作为 JavaScript 位列第一的对象, 其重要性可见一般,在这里就让我们来详细的扒一扒数组对象都有哪些方法,它们分别能对数组做什么。 一、数组是什么 官方对于 Array(数组)对象的解释…

面试题16.15.珠玑妙算

前言 这两天突然发现力扣上还是有我能写出来的题的,虽说都是简单级别的(以及一道中等的题),但是能写出来力扣真的太开心了,(大佬把我这段话当个玩笑就行了),于是乎,我觉…

C#,入门教程(21)——命名空间(namespace)与程序结构的基础知识

上一篇: C#,入门教程(20)——列表(List)的基础知识https://blog.csdn.net/beijinghorn/article/details/124094382 编写软件(大软件称为系统)与盖大楼一个道理。 假设咱们现在需要盖一座名为“天梯大厦”的…

kubernetes工作负载-DamonSet

一、DemonSet的介绍 1、什么是DemonSet DaemonSet 控制器是用来保证在所有节点上运行一个 Pod 的副本当有节点加入集群时, 也会为他们新增一个 Pod。 当有节点从集群移除时,这些 Pod 也会被回收。删除 DaemonSet 将会删除它创建的所有 Pod。 简而言之…

进入docker容器,vi: command not found

问题描述: 进入docker容器,查看文件执行vim 命令,报错 vim: command not found。搜索解决方案,说执行一下 apt-get install vim命令,然后又报错 Unable to locate package vim。 解决: 1.执行 npt-get up…

YOLOv3:算法与论文详细解读

【yolov1:背景介绍与算法精讲】 【yolo9000:Better, Faster, Stronger的目标检测网络】 目录 一、YOLOv3概述二、创新与改进三、改进细节3.1 多尺度特征3.2 不同尺度先验框3.3 完整的网络结构3.3 Darknet-53主干网络3.4 残差网络3.4.1 恒等映射3.4.2 网络…

git提交代码到远端仓库的方法详解

一、何为git git就是版本控制器,就比如说你新建了一个git文件夹,里面用于存放你的C语言实习报告,现在要用git对该文件夹进行接管。当你修改了你的C语言实习报告点击保存之后,就用git的相关命令,提交给git,让…

go语言(十)---- 面向对象封装

面向对象的封装 package mainimport "fmt"type Hero struct {Name stringAd intLevel int }func (this Hero) Show(){fmt.Println("Name ", this.Name)fmt.Println("Ad ", this.Ad)fmt.Println("Level ", this.Level)}func (thi…

priority_queue的使用与模拟实现(容器适配器+stack与queue的模拟实现源码)

priority_queue的使用与模拟实现 引言(容器适配器)priority_queue的介绍与使用priority_queue介绍接口使用默认成员函数 size与emptytoppush与pop priority_queue的模拟实现构造函数size与emptytoppush与pop向上调整建堆与向下调整建堆向上调整建堆向下调…

个人实现的QT拼图游戏(开源),QT拖拽事件详解

文章目录 效果图引言玩法 拖拽概念基本概念如何在Qt中使用拖放注意事项 游戏关键问题总结 效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c6dd66befd314442adf07e1dec0d550c.png 引言 在学习QT demo时,发现有一个拼图demo,介绍拖…

RHCE: 主从DNS服务器配置 (实现正反向解析)

主服务器配置: 准备工作: #关闭防火墙 [root192 ~]# systemctl stop firewalld#关闭selinux [root192 ~]# setenforce 0#查看selinux状态 [root192 ~]# getenforce Permissive#安装bind包 [root192 ~]# yum install bind -y#查询软件包下的文件 /etc/named.conf #主配置文…

美易官方:美股芯片股盘前走高

随着全球经济的逐步复苏,特别是科技行业的快速发展,芯片股作为科技板块的重要组成部分,在美股市场的表现尤为引人注目。近期,美股芯片股在盘前交易中持续走高,其中AMD的涨幅超过2%,ARM和英伟达也分别涨超1%…

【硬件安全】硬件安全模块—HSM

Perface 硬件安全模块(英语:Hardware security module,缩写HSM)是一种用于保障和管理强认证系统所使用的数字密钥,并同时提供相关密码学操作的计算机硬件设备。 硬件安全模块一般通过扩展卡或外部设备的形式直接连接…

《设计模式的艺术》笔记 - 职责链模式

介绍 职责链模式避免将请求发送者与接收者耦合在一起,让多个对象都有机会接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止。职责链模式是一种对象行为型模式。 实现 myclass.h // // Created by …

【算法Hot100系列】跳跃游戏

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…