初试构建工具Webpack

文章目录

  • 一、Webpack概述
  • 二、安装Webpack
  • 三、Webpack打包实战
    • 1、创建index.js
    • 2、创建index.html
    • 3、运行webpack
    • 4、浏览index.html
    • 5、添加第二个脚本
      • （1）创建index2.js
      • （2）修改index.js
      • （3）重新运行 webpack
      • （4）浏览index.html
    • 6、引入CSS样式进行编译
      • （1）安装必要的 Loaders
      • （2）更新 webpack 配置
      • （3）重新运行 webpack
      • （4）浏览index.html
  • 四、Webpack实战总结

一、Webpack概述

  • Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。它在构建过程中通过将项目中的各种资源，如 JavaScript 文件、图片、CSS 样式表等，打包成浏览器可以加载的静态文件，从而优化了资源加载和执行效率。以下是 Webpack 的一些核心概念和特性：

    1. 入口（Entry）：Webpack 从配置的入口文件开始，构建一个依赖图，这个依赖图包含了项目运行所依赖的所有模块。

    2. 输出（Output）：配置输出选项告诉 Webpack 如何输出最终的打包文件，包括文件名和输出路径。

    3. Loaders：Webpack 本身只理解 JavaScript 和 JSON 文件。Loaders 允许 Webpack 处理其他类型的文件，并将它们转换为可以在 JavaScript 中使用的模块。常见的 loader 包括 babel-loader（转换 ES6+ 代码）、css-loader 和 style-loader（处理 CSS 文件）等。

    4. 插件（Plugins）：Plugins 用于在构建过程中执行更广泛的任务，如优化打包文件、管理资源、注入环境变量等。它们可以扩展 Webpack 的核心功能。

    5. 模式（Mode）：Webpack 允许设置模式为 development、production 或 none，以启用针对不同环境的优化和警告。

    6. 模块热替换（HMR - Hot Module Replacement）：在开发过程中，Webpack 支持模块热替换，这意味着在开发过程中，当某个模块发生变化时，它可以被单独重新加载，而不需要刷新整个页面。

    7. 代码分割（Code Splitting）：Webpack 可以自动或手动进行代码分割，将代码拆分成多个小块（chunks），这些小块可以按需加载或并行加载，以提高应用的加载速度。

    8. 缓存（Caching）：Webpack 通过内容哈希和文件名来实现缓存，使得未发生变化的资源可以被浏览器缓存，避免不必要的网络请求。

    9. 开发服务器（Development Server）：Webpack 提供了一个快速、零配置的本地开发服务器，支持模块热替换。

    10. 兼容性（Compatibility）：Webpack 支持所有 ES5 兼容的浏览器，对于旧版浏览器，可能需要引入 polyfills。

  • Webpack 的强大之处在于它的灵活性和可扩展性，它通过各种 loader 和插件支持广泛的项目需求，从简单的小型项目到复杂的大型应用程序。通过合理配置，Webpack 可以显著提高开发效率和最终产品的用户体验。

二、安装Webpack

  • 执行命令：cnpm install -D webpack-cli
    在这里插入图片描述

三、Webpack打包实战

1、创建index.js

  • 在webpack里创建src，在src里创建index.js
    在这里插入图片描述

2、创建index.html

  • 在webpack里创建index.html
    在这里插入图片描述

3、运行webpack

  • 执行命令：webpack --mode development ./src/index.js --output-filename build.js
    在这里插入图片描述
  • 查看生成的build.js
    在这里插入图片描述

4、浏览index.html

  • 在浏览器里访问index.html
    在这里插入图片描述

5、添加第二个脚本

（1）创建index2.js

  • 在src里创建index2.js
    在这里插入图片描述
export let world = () => {document.write("Welcome to Vue World~");
}

（2）修改index.js

  • 导入和调用
    在这里插入图片描述
import { world } from './index2'world();

（3）重新运行 webpack

  • 执行命令：webpack --mode development ./src/index.js --output-filename build.js
    在这里插入图片描述

（4）浏览index.html

  • 在浏览器里访问index.html
    在这里插入图片描述

6、引入CSS样式进行编译

  • 新建style.css
    在这里插入图片描述

  • 在index.js里导入样式
    在这里插入图片描述

  • 重新打包生成build.js，执行命令：webpack --mode development ./src/index.js --output-filename build.js
    在这里插入图片描述

  • 运行 webpack 时遇到了一个错误，这个错误与 CSS 文件的处理有关。错误信息表明 webpack 在解析 style.css 文件时失败了，因为它没有配置适当的 loader 来处理 CSS 文件。

  • 要解决这个问题，需要在 webpack 配置中添加一个适当的 loader 来处理 CSS 文件。常用的 loader 包括 style-loader 和 css-loader。style-loader 将 CSS 嵌入到 JavaScript 中，而 css-loader 允许您使用 @import 和 URL(…/fonts.woff)。

（1）安装必要的 Loaders

  • 首先，您需要安装 style-loader 和 css-loader。执行命令：cnpm install --save-dev style-loader css-loader
    在这里插入图片描述

（2）更新 webpack 配置

  • 在 webpack.config.js 文件中，添加一个规则来使用这些 loaders 处理 CSS 文件。如果还没有这个文件，就需要创建它。
    在这里插入图片描述
const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'build.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/, // 匹配所有的 CSS 文件use: ['style-loader', 'css-loader'] // 使用 style-loader 和 css-loader}]}
};
  • 这个配置告诉 webpack，对于所有 .css 文件，都应该使用 style-loader 和 css-loader。style-loader 将 CSS 嵌入到生成的 JavaScript 中，而 css-loader 处理 CSS 文件中的 @import 和 URL。

（3）重新运行 webpack

  • 执行命令：webpack
    在这里插入图片描述

（4）浏览index.html

  • 在浏览器里访问index.html，样式起作用了，页面背景变成黄色
    在这里插入图片描述

四、Webpack实战总结

  • 在本次实战中，我们通过以下步骤成功地使用Webpack打包了一个简单的项目。

    1. 初始化项目并安装Webpack CLI。
    2. 创建入口文件index.js和HTML页面。
    3. 配置Webpack，设置入口和输出，实现了基础打包。
    4. 添加了模块热替换和代码分割，优化了开发体验和加载性能。
    5. 引入CSS样式，通过配置相应的loader，实现了样式的打包。
    6. 遇到并解决了CSS文件处理的问题，通过安装和配置style-loader和css-loader。

  • 通过这些步骤，我们不仅了解了Webpack的核心概念，还掌握了其在实际开发中的应用。Webpack的强大功能和灵活性为前端开发提供了极大的便利。

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

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

相关文章

AtomicIntegerArray使用、核心源码解析

AtomicIntegerArray使用、核心源码解析

1、API方法使用 构造方法 AtomicIntegerArray atomicIntegerArray1 new AtomicIntegerArray(100); 源码: private final int[] array; public AtomicIntegerArray(int var1) {this.array new int[var1]; }int[] array {10, 20, 30, 0, 0}; AtomicIntegerArray arr new At…
阅读更多...
伦理学（Ethics）

伦理学（Ethics）

讯飞星火 伦理学哲学是一门关于道德问题的科学，旨在系统化和理论化道德思想观点。作为一门独立的哲学分支学科，伦理学的本质是对道德现象进行研究，包括道德意识、道德行为以及道德规范现象等。 伦理学的研究对象广泛，涉及个人的…
阅读更多...
驱动（RK3588S）第六课时：linux2.6的使用与GPIO子系统的使用

驱动（RK3588S）第六课时：linux2.6的使用与GPIO子系统的使用

目录 一、Linux2.6 字符设备驱动编写框架1、合成一个完整的设备号函数2、从完整的设备号里提取主设备号3、动态申请设备号4、静态申请设备号5、释放申请的设备号6、Linux2.6 字符设备驱动的核心结构体7、初始化核心结构体8、向内核去申请 linux2.6 字符设备9、释放申请的设备10…
阅读更多...
哈希 详解

哈希 详解

目录 1. “哈希”是什么？ 2. 哈希冲突 3. 哈希函数 3.1 设计原则 3.2 常见哈希函数 4. 解决哈希冲突的两种常见方法 4.1 闭散列 4.2 开散列 4.3 散列表的扩容问题 5. 哈希表的实现 并 封装模拟实现unordered系列容器 6. 哈希的应用 6.1 位图 -- bitset …
阅读更多...
【js逆向专题】2.浏览器调试技巧

【js逆向专题】2.浏览器调试技巧

小节目标: 熟悉 开发者工具的使用熟悉 代码断点的方式熟悉 网页debugger实现方式 一. 浏览器开发者工具 1. element元素面板 展示浏览器渲染之后的页面 2. network网络面板 浏览器请求的数据都会加载在网络面板 3. console控制台面板 可以在控制台调试你对应的代码 4.…
阅读更多...
3000字带你了解SD提示词用法，一点就通，小白轻松上手（附提示词生成器）（1.4 SD提示词运用）

3000字带你了解SD提示词用法，一点就通，小白轻松上手（附提示词生成器）（1.4 SD提示词运用）

提示词是什么 提示词是我们向AI模型发出的指令。正确的提示词能让AI准确反馈所需的输出，而优质的提示词则能使AI生成的内容更优质、更符合你的期望。这与编写程序代码颇为相似，准确的代码逻辑是程序正常运行的前提，而优秀的代码则能减少运行…
阅读更多...
Vue基础概述

Vue基础概述

Vue框架概述 什么是Vue框架 Vue是一种流行的渐进式JavaScript框架，用于构建Web用户界面。它具有易学、轻量级、灵活性强、高效率等特点，并且可以与其他库和项目集成。是目前最流行的前端框架之一.框架的两种用法: 多页面应用: 在html页面中引入vue.js框…
阅读更多...
全倒装共阴节能COB超微小间距LED显示屏主导新型显示技术

全倒装共阴节能COB超微小间距LED显示屏主导新型显示技术

COB（Chip on Board）技术最早发源于上世纪60年代，是将LED芯片直接封装在PCB电路板上，并用特种树脂做整体覆盖。COB实现“点” 光源到“面” 光源的转换。点间距有P0.3、P0.4、P0.5、P0.6、P0.7、P0.9、P1.25、P1.538、P1.5625、P1.…
阅读更多...
NanoPC-T6安装redriod笔记

NanoPC-T6安装redriod笔记

这里主要用于自己对安装过程的记录，中间可能记录比较粗糙。 重新编译内核 参考链接：【环境搭建】基于linux的NanoPC-T6_LTS系统固件编译环境搭建 基于docker构建编译环境 docker run -it \ --privilegedtrue --cap-addALL \ --name nanopc_t6_lts_en…
阅读更多...
ESP32！Thonny+MicroPython+ESP32开发环境搭建！！

ESP32！Thonny+MicroPython+ESP32开发环境搭建！！

准备工具： ThonnyMicroPythonESP32 一.Thonny安装 下载地址：Thonny, Python IDE for beginnershttps://thonny.org/ 二.下载esp32环境——根据型号下载 下载地址：MicroPython - Python for microcontrollershttps://micropython.org/dow…
阅读更多...
Spring Boot 多数据源配置（JPA）

Spring Boot 多数据源配置（JPA）

目录 前言 前置环境 pom yml Entity Dao Config Controller 演示 前言 一般一个系统至少有一个数据源，用来持久化业务数据以及查询。单个数据源的系统很常见，在 Spring Boot 框架下配置也很简单。在约定大于配置这个思想下，只需要在…
阅读更多...
vue 中计算属性可以接收参数

vue 中计算属性可以接收参数

代码中的value就是接收的参数 计算属性要接收参数要写在返回的时候 computed: {isButtonDisabled() {return (value) > {const num parseInt(value);return isNaN(num) || num < 0}},},//计算属性aaa(){return (value) >{写逻辑return 返回值}} 使用 <el-butto…
阅读更多...
Python OpenCV 深入理解（二）

Python OpenCV 深入理解（二）

引言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个用于计算机视觉的开源软件库。它提供了大量的图像处理和机器视觉功能&#xff0c;支持多种编程语言&#xff0c;其中Python接口因其易用性和快速原型设计能力而受到广泛欢迎。本文将详细介绍如何…
阅读更多...
基于OMS构建OceanBase容灾双活架构的实践

基于OMS构建OceanBase容灾双活架构的实践

在实际生产环境中&#xff0c;对于关键业务&#xff0c;往往会有容灾双活的需求。除了OceanBase提供的主备库能力&#xff0c;通过官方工具OMS也可以实现容灾双活架构。目前&#xff0c;通过OMS实现的双活架构仅支持OceanBase数据库之间的数据同步。 要通过OMS实现双活架构&am…
阅读更多...
合宙LuatOS开发板Core_Air780EP使用说明

合宙LuatOS开发板Core_Air780EP使用说明

Core-Air780EP 开发板是合宙通信推出的基于 Air780EP 模组所开发的&#xff0c; 包含电源&#xff0c;SIM卡&#xff0c;USB&#xff0c;天线&#xff0c;音频等必要功能的最小硬件系统。 以方便用户在设计前期对 Air780EP模块进行性能评估&#xff0c;功能调试&#xff0c;软…
阅读更多...
快速学习GO语言总结

快速学习GO语言总结

干货分享&#xff0c;感谢您的阅读&#xff01;备注&#xff1a;本博客将自己初步学习GO的总结进行分享&#xff0c;希望大家通过本博客可以在短时间内快速掌握GO的基本程序编码能力&#xff0c;如有错误请留言指正&#xff0c;谢谢&#xff01; 一、初步了解Go语言 &#xf…
阅读更多...
基于约束大于规范的想法，封装缓存组件

基于约束大于规范的想法，封装缓存组件

架构&#xff1f;何谓架构&#xff1f;好像并没有一个准确的概念。以前我觉得架构就是搭出一套完美的框架&#xff0c;可以让其他开发人员减少不必要的代码开发量&#xff1b;可以完美地实现高内聚低耦合的准则;可以尽可能地实现用最少的硬件资源&#xff0c;实现最高的程序效率…
阅读更多...
职业院校如何建设人工智能实训室

职业院校如何建设人工智能实训室

随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;越来越多的职业院校开始意识到培养具备AI技能的人才的重要性。为了让学生能够在实践中学习&#xff0c;职业院校需要建立能够支持实际操作的人工智能实训室。本文将探讨职业院校应该如何规划和建设一个高效且…
阅读更多...
大模型产品经理学习路线，2024最新，从零基础入门到精通，非常详细收藏我这一篇

大模型产品经理学习路线，2024最新，从零基础入门到精通，非常详细收藏我这一篇

随着人工智能技术的发展&#xff0c;尤其是大模型&#xff08;Large Model&#xff09;的兴起&#xff0c;越来越多的企业开始重视这一领域的投入。作为大模型产品经理&#xff0c;你需要具备一系列跨学科的知识和技能&#xff0c;以便有效地推动产品的开发、优化和市场化。以下…
阅读更多...
《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 09部署OSPF

《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 09部署OSPF

本章的目的是帮助网络工程师确定网络的理想 OSPF 配置。本章将回答以下问题 应何时在数据中使用OSPF ?配置 OSPF 的关键设计原则是什么?OSPFv2 和 OSPFv3 之间有什么区别&#xff0c;应如何使用?如何在路由协议栈中配置 OSPF ?如何在服务器上配置 OSPF&#xff0c;例如为容…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023