Webpack4 应用

news2024/11/27 17:51:32

文章目录

  • Webpack4 应用
    • 处理CSS文件
      • 使用css-loader和style-loader内联CSS
        • 安装
        • 配置webpack.config.js
        • 编写源代码
        • 编译打包
      • 使用css-loader和mini-css-extract-plugin外部链接CSS
        • 安装
        • 配置webpack.config.js
        • 编译打包
    • 处理图片
      • 使用file-loader处理CSS图片
        • 安装file-loader
        • 配置webpack.config.js
        • 编译打包
      • 使用html-withimg-loader处理HTML图片
        • 安装html-withimg-loader
        • 配置webpack.config.js
        • 编译打包
      • 使用file-loader处理JS图片
        • 配置webpack.config.js
        • 编写index.js处理JS图片
        • 编译打包
      • 使用url-loader处理图片
        • 安装url-loader
        • 配置webpack.config.js
        • 编译打包
    • webpack-dev-server
      • 安装webpack-dev-server
      • 配置package.json
      • 执行命令

Webpack4 应用

处理CSS文件

使用css-loader和style-loader内联CSS

  • css-loader 将 CSS 文件转换成 JavaScript 模块，并解析其中的依赖关系。在模块构建完成后，webpack 会生成对应的 CSS 代码，并插入到 HTML 文件中。

  • style-loader 将解析完成的 CSS 代码注入到 HTML 文件的 <head> 中，通过<style>标签内联样式，使页面可以渲染样式。

安装

// 安装webpack
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
// 安装html插件
npm install --save-dev html-webpack-plugin@4.3.0
// 安装css-loader
npm install --save-dev css-loader@4.1.1
// 安装style-loader
npm install --save-dev style-loader@1.2.1

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
  ],
};

编写源代码

新建 index.html 文件，并写入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>index</p>
  </body>
</html>

新建 src/index.css 文件，并写入：

body {
    background-color: red;
}

新建 src/index.js 文件，并写入：

import "./index.css";

编译打包

npm run webpack

编译完成后如下：

在这里插入图片描述

打开dist/index.html 可以看到CSS样式被内联到里面了。

使用css-loader和mini-css-extract-plugin外部链接CSS

  • mini-css-extract-plugin 插件可以将CSS代码提取成单独的文件，然后通过<link>标签引入到HTML中。

安装

npm install --save-dev mini-css-extract-plugin@0.9.0

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
};

编译打包

执行命令：

npm run webpack

编译完后生成如下：

在这里插入图片描述

处理图片

使用file-loader处理CSS图片

安装file-loader

npm install --save-dev file-loader@6.0.0

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name].[ext]",
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
};

编译打包

执行命令：

npm run webpack

编译完后生成如下：

在这里插入图片描述

使用html-withimg-loader处理HTML图片

安装html-withimg-loader

npm install --save-dev html-withimg-loader@0.1.16

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name].[ext]",
            esModule: false,
          },
        },
      },
      {
        test: /\.(htm|html)$/,
        loader: "html-withimg-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
  ],
};

编译打包

执行命令：

npm run webpack

编译完后生成如下：

在这里插入图片描述

使用file-loader处理JS图片

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name].[ext]",
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
};

编写index.js处理JS图片

import "./index.css";

import img from "./images/a.jpg";

console.log(img); // img/a.jpg

let imgEl = document.createElement("img");
imgEl.src = img;
document.body.appendChild(imgEl);

编译打包

执行命令：

npm run webpack

编译完后生成如下：

在这里插入图片描述

使用url-loader处理图片

url-loader可以讲图片文件转换为Base64字符串，并嵌入打包后的JS文件中，可以减少网页请求次数。

使用url-loader时，它会先比较文件大小，如果文件小于限制值则转Base64，如果大于限制值则使用file-loader处理。

安装url-loader

npm install --save-dev url-loader@4.1.0

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(htm|html)$/,
        loader: "html-withimg-loader",
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "img/[name].[ext]",
            esModule: false,
            limit: 10 * 1024, // 文件10KB以下转为base64
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
  ],
};

编译打包

执行命令：

npm run webpack

编译完后生成如下：

在这里插入图片描述

webpack-dev-server

webpack-dev-server是Webpack提供的一个开发服务器，它在本地启动一个服务器，并且实时监听项目文件的变化，在文件发生变化时自动重新编译，并重新刷新浏览器。开发者可以通过webpack-dev-server来在本地快速开发运行Webpack项目，它大大提升了前端开发效率。

安装webpack-dev-server

npm install --save-dev webpack-dev-server@3.11.0

配置package.json

{
  "name": "use_webpack-dev-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 打包命令
    "webpack": "webpack", 
    // 开发阶段
    "dev": "webpack-dev-server --open chrome"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

执行命令

npm run dev

执行命令后，就可以热更新修改代码，所生成的代码都在内存中不会保持在本地磁盘。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ChatGPT使用体验

ChatGPT使用体验

ChatGPT使用体验 前言 介绍ChatGPT 体验ChatGPT 菜谱 编程学习 出行导航 导游攻略 中英翻译 电影推荐 文章总结 总结 前言 最近关于ChatGPT的话题已经火爆了&#xff0c;我也观察和体验了一段时间。平心而论&#xff0c;这东西真的黑科技&#xff0c;大多行业都能通…
阅读更多...
Unity-Android 打包报错

Unity-Android 打包报错

目录 报错&#xff1a; 分析&#xff1a; 1.代码剔除等级设置 2.什么方式会被剔除 3.解决办法 报错&#xff1a; FileNotFoundException: Could not load file or assembly XXX or one of its dependencies at System.AppDomain.Load (System.String assemblyString, Sys…
阅读更多...
AI低代码，或将再次颠覆开发行业

AI低代码，或将再次颠覆开发行业

IT行业最不缺少概念&#xff0c;大多数人也都是一知半解。AI的火爆&#xff0c;低代码的盛行&#xff0c;如今AIGC低代码、AI低代码、智能开发、AI生成式开发、AIGS(AI生成软件)等等呼之欲出&#xff0c; AIGC&#xff08;AI Generated Content&#xff0c;AI生成内容&#xff…
阅读更多...
攻防世界-web-php_rce

攻防世界-web-php_rce

题目描述&#xff1a;无&#xff0c;只给了下面一张图&#xff08;PS&#xff1a;图中的链接没问题&#xff09; 1. 思路分析 图中信息给的不是很到位&#xff0c;需要有点外部知识&#xff0c;网上搜索ThinkPHP V5&#xff0c;可以看到是think php的一个历史高危漏洞&#x…
阅读更多...
Grafana插件安装并接入zabbix数据源(03)

Grafana插件安装并接入zabbix数据源(03)

一、在线安装插件 如果不指定插件安装位置，则默认安装位置为/var/lib/grafana/plugins；插件安装后需要重启grafana-server 安装zabbix插件alexanderzobnin-zabbix-app # grafana-cli plugins install alexanderzobnin-zabbix-app 使用--pluginsDir指定安装路径 # grafana…
阅读更多...
分库分表的 21 条法则，hold 住

分库分表的 21 条法则，hold 住

不着急实战&#xff0c;咱们先介绍下在分库分表架构实施过程中&#xff0c;会接触到的一些通用概念&#xff0c;了解这些概念能够帮助理解市面上其他的分库分表工具&#xff0c;尽管它们的实现方法可能存在差异&#xff0c;但整体思路基本一致。因此&#xff0c;在开始实际操作…
阅读更多...
【字典详细介绍】——python基础——如桃花来

【字典详细介绍】——python基础——如桃花来

目录索引 字典的意义和特征&#xff1a;创建字典的语法&#xff1a;创建空字典的两种形式&#xff1a;创建字典的形式&#xff1a;*直接用大括号包裹即可&#xff1a;* 字典的常见操作&#xff1a;新增及修改&#xff1a;删除&#xff1a;***语法&#xff1a;****clear()清空字…
阅读更多...
【方法】PDF文档很多页，怎么提取并保存其中一页或多页？

【方法】PDF文档很多页，怎么提取并保存其中一页或多页？

​生活或工作中&#xff0c;PDF文档都很常见&#xff0c;有时候我们得到一份PDF文档&#xff0c;想要提取里面的内容&#xff0c;只需要其中一页或多页&#xff0c;或部分内容&#xff0c;那要怎么提取并保存下来呢&#xff1f;下面小编分享3个方法&#xff0c;简单快速解决问题…
阅读更多...
大型集团数字化现状洞察，三步解决组织分级分权管理难题｜身份云研究院

大型集团数字化现状洞察，三步解决组织分级分权管理难题｜身份云研究院

在经历全球范围的疫情冲击后&#xff0c;疫情对企业数字化转型的影响已经从初期被迫式、局部场景的“云办公”转化为长期深远地全场景影响。加之近年中美技术加速解耦&#xff0c;以及信创政策的加持下&#xff0c;中国企业在数字化转型中使用本地化解决方案代替原有的外企套装…
阅读更多...
Linux 使用笔记（本人出品，必属精品）

Linux 使用笔记（本人出品，必属精品）

文章目录 Part.I IntroductionChap.I 快应用Chap.II 课程所学 Part.II 基础知识Chap.X 杂记 Part.I Introduction Linux 是笔者在大四上学期学的&#xff0c;当时授课的刘老师现在还能偶尔见到。但是平时一般用 Windows&#xff0c;有机会接触 Linux 一般是偶尔在服务器上跑跑程…
阅读更多...
Android还要继续学习吗？高薪高级开发领先位置占据一席之地

Android还要继续学习吗？高薪高级开发领先位置占据一席之地

Android开发还有必要学习吗 &#xff1f; 我们来看Android从业大佬的回答&#xff1b;从回答中可以读取出一些信息&#xff0c;Android市场仍有岗位需求&#xff0c;只不过减少许多初级Android开发岗位。对于中高端市场还是面临着缺少人才&#xff1b;因为初级开发人员多啊&am…
阅读更多...
数据治理实践-全面总结：小文件治理

数据治理实践-全面总结：小文件治理

01 背景 小文件是如何产生的&#xff1a; 日常任务及动态分区插入数据&#xff08;使用的Spark2 MapReduce引擎&#xff09;&#xff0c;产生大量的小文件&#xff0c;从而导致Map数量剧增&#xff1b; Reduce数量越多&#xff0c;小文件也越多(Reduce的个数和输出文件是对应…
阅读更多...
Cube Map 系列之：手把手教你 使用 立方体贴图

Cube Map 系列之：手把手教你 使用 立方体贴图

什么是Cube Map 在开始立方体贴图之前&#xff0c;我们先简单了解下cube map。 cube map 包含了六个纹理&#xff0c;分别表示了立方体的六个面&#xff1b; 相较二维的纹理使用坐标uv来获取纹理信息&#xff0c;这里我们需要使用三维的方向向量来获取纹理信息&#xff08;一…
阅读更多...
[PyTorch][chapter 33][卷积神经网络]

[PyTorch][chapter 33][卷积神经网络]

前言 参考&#xff1a; 《数字图像处理与机器视觉》 第五章 空间域图像增强&#xff0c; 图像卷积&#xff1a; 空间域图像增强 图像增强是根据特定需要突出一副图像中的某些信息&#xff0c;同时削弱或去除 某些不需要信息的处理方法,其主要目的是是的处理后的图像对某种特定的…
阅读更多...
有人问C# web怎么部署iis上面

有人问C# web怎么部署iis上面

C# web怎么部署iis上面 C# web项目怎么来&#xff1f;&#xff1f;&#xff1f;IIS作用 IIS怎么开启步骤一&#xff1a;打开控制面板->程序->启动或关闭windows 功能->找到**Internet Information Services**步骤二&#xff1a;勾选 web管理工具&#xff0c;http错误&…
阅读更多...
超好用的工具类网站分享，打工人必备！

超好用的工具类网站分享，打工人必备！

今天给大家推荐几个超好用的工具类网站&#xff0c;无论是工作还是生活中堪称打工人必备工具。 Background Maker https://colorkit.co/background-maker/82cedd-b04a0d-56d8a9/ 网站内置了 7 种不同风格的背景&#xff0c;如渐变色、波浪、低三角形等&#xff0c;非常适合用作…
阅读更多...
基于梯度提升决策树的组合特征方法，《百面机器学习》学习笔记

基于梯度提升决策树的组合特征方法，《百面机器学习》学习笔记

《百面机器学习》学习笔记&#xff1a;基于梯度提升决策树的组合特征方法 基于梯度提升决策树的组合特征方法梯度提升决策树这里举一个例子来说明梯度提升决策树的思想方法假设对于某种类型的输入&#xff0c;经过上述介绍的梯度提升决策树构建流程得到的模型如下图所示 基于梯…
阅读更多...
开源的表单系统效果怎么样？

开源的表单系统效果怎么样？

当前&#xff0c;开源的表单系统得到了企业的重视和喜爱&#xff0c;因为它的简洁、灵活、便捷等优势特点&#xff0c;助力企业提质增效&#xff0c;各部门之间的协作沟通效率得到提升&#xff0c;数据资源也获得了有效整理和应用。今天&#xff0c;我们就一起来看看开源的表单…
阅读更多...
不愧是腾讯 ，问的贼细

不愧是腾讯 ，问的贼细

腾讯软件测试岗位的面试流程可能会因个人经验和公司而异&#xff0c;但通常情况下&#xff0c;腾讯软件测试的面试分为初试、二面、三面和四面。以下是每一轮面试可能涉及到的问题&#xff1a; 初试&#xff1a; 请介绍一下自己&#xff0c;以及为什么想要加入腾讯软件测试团…
阅读更多...
oracle 学习之 unpivot/pivot函数及hive实现该功能

oracle 学习之 unpivot/pivot函数及hive实现该功能

Oracle中pivot函数详解_实泽有之&#xff0c;无泽虚之的博客-CSDN博客pivot函数格式&#xff1a;pivot(聚合函数 for 需要转为列的字段名 in(需要转为列的字段值))&#xff1b;pivot函数说明&#xff1a;实现将指定字段的值转换为列的效果。https://blog.csdn.net/qq_40018576/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023