初试构建工具Webpack

2024-08-31 17:12
文章标签 工具 构建 初试 webpack

本文主要是介绍初试构建工具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的强大功能和灵活性为前端开发提供了极大的便利。

这篇关于初试构建工具Webpack的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1124499。

相关文章

嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
高效录音转文字：2024年四大工具精选！

高效录音转文字：2024年四大工具精选！

在快节奏的工作生活中，能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候，一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具！ 365在线转文字 直达链接：https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具，它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件，只
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...
maven 编译构建可以执行的jar包

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~ 专栏导航 Python系列: Python面试题合集，剑指大厂Git系列: Git操作技巧GO
阅读更多...
嵌入式Openharmony系统构建与启动详解

嵌入式Openharmony系统构建与启动详解

大家好，今天主要给大家分享一下，如何构建Openharmony子系统以及系统的启动过程分解。 第一：OpenHarmony系统构建      首先熟悉一下，构建系统是一种自动化处理工具的集合，通过将源代码文件进行一系列处理，最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor
阅读更多...
超强的截图工具：PixPin

超强的截图工具：PixPin

你是否还在为寻找一款功能强大、操作简便的截图工具而烦恼？市面上那么多工具，常常让人无从选择。今天，想给大家安利一款神器——PixPin，一款真正解放双手的截图工具。 想象一下，你只需要按下快捷键就能轻松完成多种截图任务，还能快速编辑、标注甚至保存多种格式的图片。这款工具能满足这些需求吗？ PixPin不仅支持全屏、窗口、区域截图等基础功能，它还可以进行延时截图，让你捕捉到每个关键画面。不仅如此
阅读更多...
利用命令模式构建高效的手游后端架构

利用命令模式构建高效的手游后端架构

在现代手游开发中，后端架构的设计对于支持高并发、快速迭代和复杂游戏逻辑至关重要。命令模式作为一种行为设计模式，可以有效地解耦请求的发起者与接收者，提升系统的可维护性和扩展性。本文将深入探讨如何利用命令模式构建一个强大且灵活的手游后端架构。 1. 命令模式的概念与优势 命令模式通过将请求封装为对象，使得请求的发起者和接收者之间的耦合度降低。这种模式的主要优势包括： 解耦请求发起者与处理者
阅读更多...
Jenkins构建Maven聚合工程，指定构建子模块

Jenkins构建Maven聚合工程，指定构建子模块

一、设置单独编译构建子模块 配置： 1、Root POM指向父pom.xml 2、Goals and options指定构建模块的参数： mvn -pl project1/project1-son -am clean package 单独构建project1-son项目以及它所依赖的其它项目。 说明： mvn clean package -pl 父级模块名/子模块名 -am参数
阅读更多...
JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性

JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性

一、什么是提升系统的高可用性 JAVA服务端，顾名思义就是23体验网为用户提供服务的。停工时间，就是不能向用户提供服务的时间。高可用，就是系统具有高度可用性，尽量减少停工时间。如何用最简单的方法来搭建一个高效率可用的服务端JAVA呢？ 停工的原因一般有： 服务器故障。例如服务器宕机，服务器网络出现问题，机房或者机架出现问题等；访问量急剧上升，导致服务器压力过大导致访问量急剧上升的原因；时间和
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2