【Webpack】生产模式

生产模式介绍

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

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

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

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

生产模式准备

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

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/686987.shtml

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

相关文章

用c语言做一个心算小游戏

有加减和乘法3种运算,由于除法涉及到浮点数存储有误差,所以比较难实现,改程序还有判定分数机制,根据难度给定合适的分数,随机抽取运算题目和符号。下面的代码适合Linux和安卓上的编译器,因为用了ANSI转义字…

SG5032EAN规格书

SG5032EAN 晶体振荡器结合了相位锁定环(PLL)技术和AT切割晶体单元,提供了73.5 MHz至700 MHz的广泛频率范围,以满足高速数字应用的需求。高性能的LV-PECL输出,2.5V和3.3V电源电压,可灵活适配不同设计的电源需…

layui表格中使用cascader后导致表格滚动条消失

修改前,受影响页面 修改后最终想要的效果 修改方法

《Go 简易速速上手小册》第8章:网络编程(2024 最新版)

文章目录 8.1 HTTP 客户端与服务端编程 - Go 语言的网络灯塔与探航船8.1.1 基础知识讲解服务端编程客户端编程 8.1.2 重点案例:简易博客服务服务端实现客户端实现运行示例 8.1.3 拓展案例 1:增加文章评论功能功能描述服务端实现客户端实现 8.1.4 拓展案例…

Python爬虫之Splash详解

爬虫专栏:http://t.csdnimg.cn/WfCSx Splash 的使用 Splash 是一个 JavaScript 渲染服务,是一个带有 HTTP API 的轻量级浏览器,同时它对接了 Python 中的 Twisted 和 QT 库。利用它,我们同样可以实现动态渲染页面的抓取。 1. 功…

sql常用语句小结

创建表: create table 表名( 字段1 字段类型 【约束】【comment 字段1注释】, //【】里面的东西可以不用加上去 字段2 字段类型 【约束】【comment 字段2注释】 )【comment 表注释】 约束:作用于表中字段上的规则…

【leetcode题解C++】455.分发饼干 and 376.摆动序列

455. 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j,都…

2024开工记

从樊登的 《轻创业》到《纳尔瓦宝典》,到《如何找到想做的事》。2024 这个春节,心里总感觉有些焦虑,有些不知所措的迷茫。 有点像 2019 年从深圳来到杭州的那段时间。面对工作,面对未来有点不知所措,不知道要做什么&a…

【刷题1】LeetCode 131. 分割回文串 java题解

2024: 刚开始做leetcode hot100,查阅自己以前写的题解专栏,发现没有这一题,于是加上。可能leetcode100更新了吧。我看现在leetcode100官网的题目已经是分好类的了,以前我的题解帖子是自己手动分类整理的。 class Solution {List&…

代码随想录|day 18

Day 18 哎,日子越来越近了,干什么都干不下去,但又必须要坚持。前途渺茫… 一、理论学习 1)自己误打误撞的时候,学习函数 int partitionmax_element(nums.begin(),nums.end())-nums.begin();也记录一下我的错误做法&#xff0c…

【Anaconda】conda创建、删除、查看虚拟环境,安装pytorch

1.删除环境 首先退出现有的环境 conda deactivate然后查看要删除的环境名称与路径 conda env list接下来就可以删除环境了 有两种方法 方法1: conda env remove -p 要删除的虚拟环境路径对我来说就是: conda env remove -p D:\Anaconda3\envs\MVDet…

【Unity】【VR开发】针对VR项目的优化版Unity Build Settings

【背景】 编辑器中做了功能后,打包后却总会画面不满意,所以到处学习,总结成本篇,希望有用。 【准备】 本篇总结基于Unity 2021 LTS。 模板选择3D(URP) 如果URP不支持所用的部分Assets,那么也可以选择Built-in管线,不过URP肯定画面效果上要胜过Built-in。 HDRP不适用…

智能摄像头prv文件恢复案例

家用智能摄像头一般采用的是mp4或者mov视频方案,常见的是mp4,对于部分有开发能力的厂商可能会采用自定义方案(如360的bin文件),今天我们来看一个小厂的PRV自定义文件的恢复案例。 故障存储: 32G TF卡/fat32/ 簇(块)大…

没钱、没资源、没团队、没商业模式,该怎么创业成功?

很多人为什么要去创业呢?大多还是万般无奈去创业的。如果人人都有王思聪的条件,天台你享受岂不是最好?谁还愿意苦哈哈创业呢? 对于很多创业者而言,创业初期就是会面对没钱、没资源、没团队、没商业模式的窘境&#xff…

[python][whl]GDAL的python的whl文件下载地址

以下为GDAL所有windows x64版本的whl文件,其中命令规则为:以GDAL-3.4.3-cp38-cp38-win_amd64.whl为例子 GDAL:为模块名称 3.4.3:为GDAL版本号 cp38:表示支持python3.8版本,其他版本不支持 win_amd64&am…

vmware-17虚拟机安装教程及版本密钥(保姆级,包含图文讲解,不需注册账户)

文章目录 vmware安装教程一、下载vmware二、安装三、破解密匙 vmware安装教程 一、下载vmware 1.进入VMware官网:https://www.vmware.com/sg/products/workstation-pro.html 2.向下翻找到,如下界面并点击“现在安装” 3.稍事等待以下直到出现以下界面…

004 - Hugo, 分类

004 - Hugo, 分类content文件夹 004 - Hugo, 分类 content文件夹 ├─.obsidian ├─categories │ ├─Python │ └─Test ├─page │ ├─about │ ├─archives │ ├─links │ └─search └─post├─chinese-test├─emoji-support├─Git教程├─Hugo分类├─…

基于飞腾ARM+FPGA国产化计算模块联合解决方案

联合解决方案概述 随着特殊领域电子信息系统对自主创新需求的日益提升,需不断开展国产抗恶劣环境计算整机及模块产 品的研制和升级。特殊领域电子信息系统的自主创新,是指依靠自身技术手段和安全机制,实现信息系统从硬 件到软件的自主研发…

Linux系统——拓展LVM逻辑卷分区与磁盘配额

一、LVM逻辑卷分区 1.检测并确认新硬盘 1.1fdisk 查看或管理硬盘分区 fdisk -l(小写的L) (硬盘设备) 或 fdisk 硬盘设备 1.2实际操作 1.2.1fdisk查询结果详解 Device:分区的设备文件名称Boot:是否…

鸿蒙OS跨进程IPC与RPC通信

一、IPC与RPC通信概述 基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Binder驱动,用于设备内的跨进程通信,后者使用软总线驱动…