前端工程化之: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.mfbz.cn/a/372935.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在HA智能家居系统中添加HACS集成并实现异地控制家中苹果与小米设备

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…

第十三篇【传奇开心果系列】Python的OpenCV库技术点案例示例:光流估计

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例:光流估计短博文目录前言一、光流估计介绍二、Lucas-Kanade光流介绍和示例代码三、Horn-Schunck光流介绍和示例代码四、cv::calcOpticalFlowPyrLK()函数实现光流估计介绍和示例代码五、光流估计用于运动分析…

Express框架介绍—node.js

Express—Node.js 官网传送门(opens new window) 基于 Node.js 平台&#xff0c;快速、开放、极简的 Web 开发框架 Express 是用于快速创建服务器的第三方模块。 Express 初体验 基本使用 安装 Express&#xff1a; npm install express创建服务器&#xff0c;监听客户端请…

瑞萨RA6M3开发实践指南-UART实践

1.背景说明 本文是参考瑞萨RA6M3开发实践指南文章教程&#xff0c;基于瑞萨HMI-Board BSP :1.1.1 版本 RT-Thread 5.0.1 版本操作步骤进行记录&#xff0c;整理成的文档。 1.1 本章内容 使用RT-Thread Studio创建开发板的程序&#xff0c;编写UART的程序&#xff0c;实现串口…

跟着pink老师前端入门教程-day19

一、移动WEB开发之流式布局 1、 移动端基础 1.1 浏览器现状 PC端常见浏览器&#xff1a;360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;欧朋浏览器&#xff0…

Yolo v8 进行对象数量统计示例

Yolo v8 进行对象数量统计示例 示例代码 from ultralytics import YOLO from ultralytics.solutions import object_counter import cv2def object_count_test():# 权重文件&#xff0c;可替换为自己训练的权重文件model YOLO("yolov8n.pt")# results model.trai…

【码农新闻】 用HTTPS,还能被查出浏览记录吗 常用且好用的在线工具......

目录 【码农新闻】 用HTTPS&#xff0c;还能被查出浏览记录吗 常用且好用的在线工具...... 用HTTPS&#xff0c;还能被查出浏览记录吗常用且好用的在线工具尤雨溪 文章所属专区 码农新闻 欢迎各位编程大佬&#xff0c;技术达人&#xff0c;以及对编程充满热情的朋友们&#xf…

锁优化的方法

减少锁持有时间 减少锁粒度 将大对象拆分成小对象&#xff0c;增加并行度&#xff0c;降低锁竞争。ConcurrentHashMap允许多个线程同 时进入 锁分离 根据功能进行锁分离ReadWriteLock在读多写少时&#xff0c;可以提高性能。 锁消除 锁消除是发生在编译器级别的一种锁优化…

C语言数组练习以及场景练习题

写了那么久的知识点梳理&#xff0c;今天来写点自己觉得不错的练习题来分享&#xff0c;顺便来巩固自己的知识点&#xff0c;和加强题型的解决方法的记忆。今天给大家带来的有数组的找数字题目&#xff0c;以及场景找凶手的题目&#xff0c;下面让我们来看看今天的第一道题目。…

一文带你读懂编码和解码

编码和解码 编码&#xff1a;将字符转换为对应的二进制序列的过程叫做字符编码。 解码&#xff1a;将二进制序列转换为对应的字符的过程叫做字符解码。 py文件的创建&#xff1a; 文本编辑器在内容没有保存前&#xff0c;内容以编辑器默认编码形式保存在内存中。pycharm默认…

我要成为嵌入式高手之2月4、5日Linux高编第二天!!

读写函数接口 1、fgetc 语法&#xff1a; 功能&#xff1a;从流中获取一个字符 练习1&#xff1a;编写程序统计文件的行数 #include <stdio.h>int main(void) {FILE *fp NULL;char ch 0;int row 0;fp fopen("file.txt","r");if (NULL fp){pe…

5 分钟让你了解什么是搜索引擎

文章目录 搜索引擎概述基于业务模式分类垂直搜索&#xff08;垂搜&#xff09;通用搜索&#xff08;通搜&#xff09;本地搜索引擎 基于技术实现分类基于关键词的搜索引擎&#xff08;Keyword-based Search Engine&#xff09;语义搜索引擎&#xff08;Semantic Search Engine&…

好用的大学生教材搜题软件?帮助大学生解决问题的实用搜题工具 #知识分享#知识分享#经验分享

对于大学生来说&#xff0c;每天面对各式各样的学习任务和问题&#xff0c;寻找合适的学习资源和工具成了我们的迫切需求。幸运的是&#xff0c;现如今有许多高效且实用的日常搜题和学习软件可以满足我们的需求&#xff0c;助力我们取得更好的学习成果。 1.Forest专注森林 Fo…

力扣:42. 接雨水 84.柱状图中最大的矩形(单调栈,双指针)

这两道题解题思路类似&#xff0c;一个是单调递增栈&#xff0c;一个是单调递减栈。本篇博客给出暴力&#xff0c;双指针和单调栈解法。 42. 接雨水 题目&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后…

CIFS(Samba)服务的使用

理论部分 概念&#xff1a; 通用互联网文件系统CIFS使用的是公共的或者开放的SMB协议版本。SMB是在会话层和表示层以及小部分应用层上的 协议&#xff0c;使用了NetBIOS的应用程序接口API。该协议在局域网上用于服务器文件访问和打印。它使用客户/服务器模式&#xff0c;客 户…

ffmpeg的使用,安装,抽帧,加水印,截图,生成gif,格式转换,抓屏等

实际使用中总结的关于ffmpeg对视频的处理的记录文档 具体信息&#xff1a; http://ffmpeg.org/download.html 官网下载ffmpeg 关于ffmpeg的安装详细步骤和说明 装ffmpeg 方式,Linux和windows下的 http://bbs.csdn.net/topics/390519382 php 调用ffmpeg , http://bbs.csdn.net/t…

【算法】利用递归dfs解决二叉树算法题(C++)

文章目录 1. 前言2. 算法题2331.计算布尔二叉树的值129.求根节点到叶节点数字之和LCR047.二叉树剪枝98.验证二叉搜索树230.二叉搜索树中第K小的元素257.二叉树的所有路径 1. 前言 有关 递归 的相关解释与解题 请看下文&#xff1a; 以汉诺塔理解递归、并用递归解决算法题 对于…

关于Linux和消息队列常见的十道面试题

实际工作中如何排查CPU飙升问题&#xff1f; 在实际工作中&#xff0c;我们可以通过以下步骤来排查CPU飙升的问题&#xff1a; 使用系统监控工具&#xff1a;首先&#xff0c;我们可以使用系统监控工具&#xff0c;如top命令&#xff0c;来查看所有进程占系统CPU的排序。这样可…

AI助力农作物自动采摘,基于YOLOv7【tiny/l/x】不同系列参数模型开发构建作物生产场景下番茄采摘检测计数分析系统

去年十一那会无意间刷到一个视频展示的就是德国机械收割机非常高效自动化地24小时不间断地在超广阔的土地上采摘各种作物&#xff0c;专家设计出来了很多用于采摘不同农作物的大型机械&#xff0c;看着非常震撼&#xff0c;但是我们国内农业的发展还是相对比较滞后的&#xff0…

【深度学习】从0完整讲透深度学习第2篇:TensorFlow介绍和基本操作(代码文档已分享)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论深度学习相关知识。可以让大家熟练掌握机器学习基础,如分类、回归&#xff08;含代码&#xff09;&#xff0c;熟练掌握numpy,pandas,sklearn等框架使用。在算法上&#xff0c;掌握神经网络的数学原理&#xff0c;手动实…
最新文章