前端工程化之:webpack2-1(常用扩展)

目录

前言

一、CleanWebpackPlugin

二、HtmlWebpackPlugin

三、CopyPlugin

四、webpack-dev-server

五 、file-loader

六、url-loader

七、路径问题

前言

由于 webpack webpack-cli webpack-dev-server 会存在版本不兼容问题,所以这里使用的版本如下: 

"devDependencies": {"clean-webpack-plugin": "^3.0.0","file-loader": "^5.0.2","html-webpack-plugin": "^3.2.0","url-loader": "^3.0.0","webpack": "^4.41.5","webpack-cli": "^3.3.10","webpack-dev-server": "^3.10.1"}

一、CleanWebpackPlugin

 每次打包后不会再次生成新的文件,而是对原来打包的文件进行更新。

 webpack.config.js :

var { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {mode: "development",devtool: "source-map",output: {filename: "[name].[chunkhash:3].js"},plugins: [new CleanWebpackPlugin()]
}

二、HtmlWebpackPlugin

 可以自动生成 html 文件引用打包后的文件。

 webpack.config.js :

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {mode: "development",devtool: "source-map",entry: {home: "./src/index.js",//home由index打包来a: "./src/a.js"},output: {filename: "scripts/[name].[chunkhash:5].js"},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({//可以每个文件引用不同的包template: "./public/index.html",//自动生成的html文件模板采用filename: "home.html",chunks: ["home"]//引用的js包}),new HtmlWebpackPlugin({template: "./public/index.html",filename: "a.html",chunks: ["a"]})]
}

三、CopyPlugin

复制静态文件。 

 webpack.config.js : 

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {mode: "development",devtool: "source-map",output: {filename: "scripts/[name].[chunkhash:3].js"},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: "./public/index.html"}),new CopyPlugin([{ from: "./public", to: "./" }//将public中的文件复制到出口文件夹例(默认dist)])]
}

四、webpack-dev-server

开发服务器:搭建一个本地开发环境,直接运行到浏览器,不会每次运行都打包。

默认运行本地地址:http://localhost:8080/

// 安装插件
npm i -D webpack-dev-server// 运行命令
npx webpack-dev-server

配置:

  1.  port:运行的端口号;
  2.  open:开启服务器后自动打开浏览器窗口发访问地址;
  3.  index:默认值 "index.html"
  4.  proxy:配置代理;
  5.  stats:配置控制台输出内容。

五 、file-loader

 file-loader 可以将打包过程中识别不了的文件进行处理,生成依赖的文件到输出目录,然后将模块文件设置为:导出一个路径。

 src/index.js :

const png = require("./assets/backg.png").default;
let num = Math.random();
console.log(num, "--");
if (num > 0.5) {var img = document.createElement("img");img.src = png;document.body.appendChild(img);
}

 webpack.config.js : 

module: {rules: [{test: /\.(png)|(jpg)|(gif)$/,// use: ["file-loader"], // 第一种写法use: [{loader: "file-loader", // loader插件名options: {name: "imgs/[name].[hash:5].[ext]", // 生成文件名},},], // 第二种写法},],},

  file-loader 原理: 

function loader(source){// source:文件内容(图片内容 buffer)// 1. 生成一个具有相同文件内容的文件到输出目录// 2. 返回一段代码   export default "文件名"
}

六、url-loader

将依赖的文件转换为:导出一个 base64 格式的字符串。

  src/index.js :

import png from "./assets/backg.png"; // url-loader
let num = Math.random();
console.log(num, "--");
if (num > 0.5) {var img = document.createElement("img");img.src = png;document.body.appendChild(img);
}

  webpack.config.js : 

module: {rules: [{test: /\.(png)|(jpg)|(gif)$/,use: [{loader: "url-loader",options: {// limit: false, // 默认为false,为false时不限制任何大小,所有经过loader的文件进行base64编码返回limit: 10 * 1024, // 只要文件不超过10*1024字节,则使用base64编码,否则,交给file-loader处理name: "imgs/[name].[hash:5].[ext]", // file-loader处理},},],},],

 url-loader 原理: 

function loader(source){// source:文件内容(图片内容 buffer)// 1. 根据buffer生成一个base64编码// 2. 返回一段代码   export default "base64编码"
}

七、路径问题

在使用 file-loader url-loader 时,可能会遇到一个非常有趣的问题:

比如,通过 webpack 打包的目录结构如下:

dist|—— img|—— a.png  #file-loader生成的文件|—— scripts|—— main.js  #export default "img/a.png"|—— html|—— index.html #<script src="../scripts/main.js" ></script>

这种问题发生的根本原因:模块中的路径来自于某个 loader plugin ,当产生路径时, loader plugin 只有相对于 dist 目录的路径,并不知道该路径将在哪个资源中使用,从而无法确定最终正确的路径。

面对这种情况,需要依靠 webpack 的配置 publicPath 解决。

module.exports = {mode: "development",devtool: "source-map",output: {filename: "scripts/[name].[chunkhash:5].js",publicPath: "/"//一般情况设置总的路径即可}
}

有些插件会自己内置 publicPath 属性进行配置。 

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

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

相关文章

设计模式全览:编程艺术的精髓!

写在前面 请心急的读者直接看往后看「设计模式精炼」&#xff01;一定不会后悔的&#xff01; 在编程世界中&#xff0c;设计模式如同优雅的舞者&#xff0c;缠绕在代码的脉络中&#xff0c;引领着程序走向卓越。设计模式解决的是软件开发中经常出现的问题&#xff0c;他们如同…

解放双手!ChatGPT助力编写JAVA框架!

摘要 本文介绍了使用 ChatGPT逐步创建 一个简单的Java框架&#xff0c;包括构思、交流、深入优化、逐步完善和性能测试等步骤。 亲爱的Javaer们&#xff0c;在平时编码的过程中&#xff0c;你是否曾想过编写一个Java框架去为开发提效&#xff1f;但是要么编写框架时感觉无从下…

Tauri:相比Electron,还有很长路要走的。

一、Tauri是什么 Tauri是一个开源的框架&#xff0c;用于构建跨平台的桌面应用程序。它允许开发者使用Web技术&#xff08;如HTML、CSS和JavaScript&#xff09;来构建高性能的本地应用程序&#xff0c;同时提供了访问底层操作系统功能的能力。 Tauri的设计目标是提供一种简单…

web读取前端txt并解析

用途&#xff0c;解析csv、txt等作为前端变量&#xff0c;方便进行其他操作。 假设txt里为数组。 1.html内容 <div class"input-group mb-3"><!-- <span class"input-group-text">文件路径</span>--><input type&q…

CI/CD总结

bitbucket deployment: Bitbucket Cloud resources | Bitbucket Cloud | Atlassian Support Jenkins:

第97讲:MHA高可用集群模拟主库故障以及修复过程

文章目录 1.分析主库故障后哪一个从库会切换为主库2.模拟主库故障观察剩余从库的状态2.1.模拟主库故障2.3.当前主从架构 3.修复故障的主库3.1.修复主库3.2.当前主从架构3.3.恢复MHA 1.分析主库故障后哪一个从库会切换为主库 在模拟MHA高可用集群主库故障之前&#xff0c;我们先…

【JavaSE篇】——抽象类和接口

目录 &#x1f393;抽象类 &#x1f388;抽象类语法 &#x1f388;抽象类特性 &#x1f388;抽象类的作用 &#x1f393;接口 &#x1f388;语法规则 &#x1f388;接口特性 &#x1f388;接口使用(实现USB接口&#xff09; &#x1f388;实现多个接口 &#x1f388;…

力扣刷题之旅:进阶篇(一)

力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;主要用于帮助程序员提升算法和数据结构方面的能力。以下是一些力扣上的入门题目&#xff0c;以及它们的解题代码。 --点击进入刷题地址 题目1&#xff1a;三数之和 题目描述&#xff1a; 给定一个包含n个…

代码随想录算法训练营第41天 | 343.整数拆分 + 96.不同的二叉搜索树

今日任务 343. 整数拆分 96.不同的二叉搜索树 343.整数拆分 - Medium 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0…

springboot+vue实现excel导出

后端 导入pom依赖 <dependency>x<groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.2.0</version> </dependency> Entity实体类 这里以User为例&#xff0c;可按照自己实际…

vulhub中AppWeb认证绕过漏洞(CVE-2018-8715)

AppWeb是Embedthis Software LLC公司负责开发维护的一个基于GPL开源协议的嵌入式Web Server。他使用C/C来编写&#xff0c;能够运行在几乎先进所有流行的操作系统上。当然他最主要的应用场景还是为嵌入式设备提供Web Application容器。 AppWeb可以进行认证配置&#xff0c;其认…

【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px? 问题解决方案transform: scale(0.5)&#xff08;常用&#xff09;SVG 矢量图设置text 问题 文字需要显示为12px&#xff0c;但是小于12px的&#xff0c;浏览器是显示不来的 解决方案 transform: scale(0.5)&#xff08;常用&#xff0…

树莓派-Ubuntu22.04

树莓派 1 安装Ubuntu系统2 ssh登录3 配置3.1 安装软件3.2 换源3.3 安装桌面3.4 开机脚本 1 安装Ubuntu系统 通过制作sdk&#xff0c;使系统在sdk中运行&#xff1a; 下载制作软件&#xff1a;https://www.raspberrypi.com/software/ 下载Ubuntu镜像&#xff1a;https://cn.ub…

【Day40】代码随想录之动态规划_343. 整数拆分_96.不同的二叉搜索树

文章目录 动态规划理论基础动规五部曲&#xff1a;出现结果不正确&#xff1a; 343. 整数拆分96.不同的二叉搜索树 动态规划理论基础 动规五部曲&#xff1a; 确定dp数组 下标及dp[i] 的含义。递推公式&#xff1a;比如斐波那契数列 dp[i] dp[i-1] dp[i-2]。初始化dp数组。…

ubuntu22.04 有一台机器说有4T硬盘,但是df的时候看不到,怎么查找

在 Ubuntu 22.04 上&#xff0c;如果你有一块硬盘在使用df命令时未显示&#xff0c;这通常意味着硬盘尚未被挂载或者根本未被分区和格式化。以下是一些步骤来帮助你识别和准备新硬盘&#xff1a; 1. 检查硬盘是否被系统识别 首先&#xff0c;使用lsblk命令来检查系统是否识别…

基于Springboot开发的JavaWeb作业查重系统[附源码]

基于Springboot开发的JavaWeb作业查重系统[附源码] &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &a…

飞机打靶子小游戏

1.飞机可以通过键盘移动&#xff0c;发射子弹. 2.显示得分. 3.靶子随机 4.打到靶子加分并换位 #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> #include<stdlib.h> #include <conio.h>//_getch()函数 #include<time.h>#define HIGH 20 #defi…

zlib交叉编译(rv1126)

目录 1.下载 2.解压 3.配置 4.编译 1.下载 1)下载地址 zlib Home Site 2)下载tar.gz版本 下载该版本。 2.解压 1)解压到某个文件夹

RabbitMQ安全防护,加固策略

RabbitMq简介 中间件简介 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题实现高性能,高可用,可伸缩和最终一致性[架构] 使用较多的消息队列有 ActiveMQ(安全),RabbitMQ,ZeroMQ,Kafka(大数据),MetaMQ,RocketMQ 以下介绍消息队…

探索设计模式的魅力:从单一继承到组合模式-软件设计的演变与未来

设计模式专栏&#xff1a;http://t.csdnimg.cn/nolNS 在面对层次结构和树状数据结构的软件设计任务时&#xff0c;我们如何优雅地处理单个对象与组合对象的一致性问题&#xff1f;组合模式&#xff08;Composite Pattern&#xff09;为此提供了一种简洁高效的解决方案。通过本…