webpack配置、插件使用案例

概念

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。官网:https://webpack.js.org/

webpack 能做什么

1. 语法转换

   + less/sass/stylus转换成css

   + es6转换成es5

   + ...

2. html/css/js 代码压缩合并 (打包)

3. webpack可以在开发期间提供一个开发环境

   + 自动打开浏览器

   + 保存时自动刷新

webpack基本打包配置

1. 建目录,在 app 目录下添加 src/main.js文件;

2. 初始化;

 yarn init -y

3. 安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的);

yarn add webpack  webpack-cli  -D

4. 到package.json文件中, 配置scripts;

scripts: {"build": "webpack --config webpack.config.js"
}

5. 提供 webpack.config.js;

   参考文档:   https://webpack.docschina.org/concepts/#入口-entry-

const path = require('path')
module.exports = {// entry: 配置入口文件 (从哪个文件开始打包)entry: './src/main.js',// output: 配置输出 (打包到哪去)output: {// 打包输出的目录 (必须是绝对路径)path: path.join(__dirname, 'dist'),// 打包生成的文件名filename: 'bundle.js'},// 打包模式 production 压缩/development 不压缩mode: 'development'
}

6. 执行配置的scripts脚本;

yarn build

webpack插件使用案例

自动生成html --- html-webpack-plugin插件

 1. 下载 (-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的)

yarn add html-webpack-plugin  -D

  2.  在`webpack.config.js`文件中,引入这个模块

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

  3. 配置插件

plugins: [...new HtmlWebpackPlugin({ template: './public/index.html' })
]

 配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动被插件生成 html 引入。

分离 css 文件 --- mini-css-extract-plugin插件

1. 下载(-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的)

yarn add mini-css-extract-plugin -D

2.  在`webpack.config.js`文件中,引入这个模块

// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

3. 配置loaders

// 模块加载
module: {// loader的规则rules: [// 配置 css 文件的解析{test: /\.css$/,use: [ // 根据官方文档写的,注意'css-loader'的书写位置{loader: MiniCssExtractPlugin.loader,options: {publicPath:'../',},},'css-loader']},],
}

4. 配置插件

// 配置插件
plugins: [...// 定义打包好的文件的存放路径和文件名new MiniCssExtractPlugin({filename:'css/index.css'})
],

清除dist目录的插件 --- clean-webpack-plugin插件

  1. 下载 (-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的)

yarn add clean-webpack-plugin -D

  2.  在`webpack.config.js`文件中,引入这个模块

// 导入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  3. 配置插件

plugins: [...// 调用清除打包目录插件new CleanWebpackPlugin()
]

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

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

相关文章

关闭vscode保存自动格式化的功能

1 首先打开设置 搜索:editor.formatOnSave 取消勾选框 2 再打开 settings.json 搜索 editor 找到 settings.json 设置: "editor.formatOnSave": false

Java并发控制:深入解析Java BlockingQueue的用法与实践

1.BlockingQueue概述 1.1 BlockingQueue的定义与用途 BlockingQueue是一个支持两个附加操作的Queue,即在队列为空时获取元素的线程会等待队列变为非空,当队列满时存储元素的线程会等待队列可用。这主要用于生产者-消费者场景,其中生产者不能…

算法day02

1、202. 快乐数 如上题所述: 在该题意规则下,所有的数字变化会有两种情况,其一最后是有的会变化成恒为1的数;其二是有的数会变化会呈现成有规律的环,分别如下图所示: 可以近似的理解为图一就是一个环&#…

态、势、感、知四部分的注意力模型的融合

态、势、感、知在抢占注意力时往往是通过自身具有吸引力、引发情感共鸣或启发思考等方式来引起人们的注意和关注。态、势、感、知在抢占注意力方面的作用可以分别描述如下: 态:人们通常会被某种特定的姿态或面部表情所吸引,因为姿态能够传达出…

JVM堆内存分析

jmap工具查看堆内存 jmap:全称JVM Memory Map 是一个可以输出所有内存中对象的工具,可以将JVM中的heap(堆),以二进制输出成文本,打印出Java进程对应的内存 找到pid jmap -heap 19792 Attaching to process ID 19792…

(十五)Java 之方法

目录 一. 前言 二. Java 方法 2.1. 什么是方法 2.2. 方法的定义 2.3. 方法的调用 2.4. void 关键字 2.5. 通过值传递参数 2.6. 方法的重载 2.7. 变量作用域 2.8. 命令行参数的使用 2.9. 构造方法 2.10. 可变参数 2.11. finalize() 方法 三. 课后习题 一. 前言 方…

[Redis] 使用布隆过滤器和分布式锁实现用户注册

布隆过滤器(Bloom Filter)是一种数据结构,用于快速判断一个元素是否可能存在于一个集合中。它通过使用多个哈希函数和一个位数组来表示一个集合,当一个元素被加入到集合时,通过哈希函数计算出多个哈希值,并…

windows10鼠标右键添加idea打开文件

在Windows系统中,你可以通过修改注册表来为鼠标右键菜单添加新的打开方式,比如IDEA。以下是具体的操作步骤: 打开注册表编辑器:按下WinR键,输入regedit并回车,即可打开注册表编辑器。定位到指定路径&#…

怎么清理服务器的C盘?

有时候我们经常会遇到C盘被占满的情况,C盘被占满的原因有很多,下面我们就来分析下有可能导致C盘占满的原因: 第一种情况:中毒 打开服务器任务管理器选择进程,并且勾选显示所有用户的进程,我们可以点击映像…

docker安装部署FastGPT

一:FastGPT介绍 FastGPT 是一个基于 LLM 大语言模型的知识库问答系统,提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排,从而实现复杂的问答场景! 官网地址:https://fastgpt.in/zh …

【力扣】143. 重排链表

143. 重排链表 题目描述 给定一个单链表 L 的头节点 head ,单链表 L 表示为: L0 → L1 → … → Ln - 1 → Ln请将其重新排列后变为: L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → …不能只是单纯的改变节点内部的值,而是需要…

python列表相关命令

在我们的一生中,没有人会为你等待,没有机遇会为你停留,成功也需要速度。 Python中的列表(List)是一种非常灵活且常用的数据结构,它可以容纳任意数量的元素,并且支持混合类型。下面让我来介绍一下…

Fastgpt知识库接入oneapi和自定义大模型

本期教程教大家训练自己的知识库回答chatgpt回答不了的问题 FastGPT 是一个知识库问答系统,可以通过调用大模型和知识库回答特定的问题 可以做成专属 AI 客服集成到现有的APP或者网站内当作智能客服支持网络爬虫学习互联网上的很多知识可以通过flow可视化进行工作流程编排 本期…

【spark】win10 pyspark3.5.1 安装超级简单

下载地址:https://spark.apache.org/downloads.html 下载完成: 复制文件到自己的路径下,路径最好不要有中文、空格; 解压tgz文件: 修改环境变量: 创建SPARK_HOME: D:\software_download\spar…

Facebook之道:探索社交媒体领域的未来

随着科技的不断发展,社交媒体已经成为我们日常生活中不可或缺的一部分。而在这个领域中,Facebook一直是引领者和领头羊。然而,随着时间的推移,社交媒体领域正在发生着翻天覆地的变化,而Facebook又将何去何从&#xff1…

【Python】在Windows Server上部署Flask后端服务器

想要在Windows Server上部署flask应用,当然不能只下一个anaconda配完环境之后直接启动py文件,这样的话后台会有一段警告: * Serving Flask app app* Debug mode: off WARNING: This is a development server. Do not use it in a production …

攻略:ChatGPT3.5~4.0(中文版)国内无限制免费版(附网址)【2024年5月最新更新】

一、什么是ChatGPT? 1、ChatGPT的全名是Chat Generative Pre-trained Transformer,其中"chat"表示聊天。"GPT"则是由三部分组成:生成式(generative)意味着具有创造力;预训练&#xff0…

跟我学做零售数据分析报表-商品滞销分析

商品滞销的情况很常见,因此商品滞销分析也是基本属于零售数据分析标配内容之一。那么,商品滞销分析报表该怎么做?要做计算哪些指标,怎么分析滞销趋势?别急,奥威BI零售数据分析方案预设了一张BI商品滞销分析…

FreeRTOS(随便写写,项目用到)

FreeRTOS是什么(并发) RTOS(Real Time Operating System,中文就是实时操作系统) FreeRTOS是一个迷你的实时操作系统内核。 作为一个轻量级的操作系统,功能包括:任务管理、时间管理、信号…

CI/CD与容器编排的结合

确实,对于需要多个步骤或阶段的工作流,Kubernetes原生并没有内建的工作流引擎,但可以通过以下几种方式来实现复杂的工作流程: Kubernetes Jobs:对于需要运行到完成的一次性任务,可以使用Kubernetes的Job资源…