webpack学习-1.起步

webpack学习-1.起步

  • 1.基础设置
  • 2.配置文件的引入
  • 3.总结

1.基础设置

首先 webpack是干嘛的呢,用官网的一张图
在这里插入图片描述
Webpack 是一个现代的静态模块打包工具。它主要用于将前端应用程序中的各种资源(例如 JavaScript、CSS、图片等)打包成一个或多个优化的静态文件,以便在浏览器中加载和运行。只要功能有:模块打包,代码转换,资源优化,代码分割,开发调试。
先学起步吧,也是跟着官方文档来的,也就总结一下吧。

首先创建进入一个目录并初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack):

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

现在创建以下目录结构、文件和内容:
project

webpack-demo
|- package.json
|- package-lock.json
|- index.html
|- /src
|- index.js

根据官网的 创建一个 bundle,这句话要记住

执行 npx webpack 会将脚本 src/index.js 作为 入口起点,也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 及以上版本提供的 npx 命令,可以运行在最初安装的 webpack 包中的 webpack 二进制文件(即 ./node_modules/.bin/webpack)

这是在没有webpack的配置文件的情况下默认的,会 src/index.js 作为 入口起点,也会在生成 dist/main.js 作为 输出,刚好作为index.html的script的js引入。

2.配置文件的引入

webpack v4 无须任何配置即可运行,然而大多数项目会需要很复杂的设置,因此 webpack 仍然支持 配置文件,这比在终端中手动输入大量命令更加高效。

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),},
};

通过命令行再次运行配置文件进行构建

npx webpack --config webpack.config.js

这样构建不方便,命令行有点多,可以在 package.json 文件中添加 npm script 以设置一个快捷方式:

 {"name": "webpack-demo","version": "1.0.0","description": "","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^5.4.0","webpack-cli": "^4.2.0"},"dependencies": {"lodash": "^4.17.20"}}

重点是scripts里的build配置,这样就可以用npm run build进行构建了

3.总结

通过起步学习,了解到webpack可以将一些import语法(例子中是这个,当然还有很多的语法)转换成浏览器认识的语法,进而使项目运行达到预想结果。简单的工作原理,配置文件,npm script。

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

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

相关文章

c++学习第四讲---函数提高

1.函数默认参数&#xff1a; 在&#xff08; &#xff09;中将参数赋值&#xff0c;如果传值了&#xff0c;则用传入值&#xff0c;否则才用函数中默认参数。 例&#xff1a; int func(int a, int b 3, int c 3) {return a b c; } int main() {cout << func(1, 2)…

CKM3 组件价格 取数逻辑分析

系统中代码翻译过来如下&#xff1a; 根据TCKH1~ELEHK TCKH3~ELEHK AND TCKH1~ELEMT TCKH3~ELEMT&#xff0c; TCKH1~ELEHK TKEVA04~ELEHK AND TCKH1~ELEMT TKEVA04~ELEMT&#xff0c; 将TCKH3、TCKH1、TKEVA04组成一张表LT_TCKH3。 根据LT_TCKH3-TCKH3ELEHK成本组件结构Z1…

HTML CSS JavaScript的网页设计

一、网页界面效果&#xff1a; 二、HTML代码&#xff1a; <!DOCTYPE html> <!-- 声明文档类型--> <html lang"en"> …

HarmonyOS/OpenHarmony应用开发

OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目, 目标是面向全场景、全连接、全智能时代, 搭建一个智能终端设备操作系统的框架和平台, 促进万物互联产业的繁荣发展。 了解OpenHarmony HarmonyOS是华为通过OpenHarmony项目&#xff0c;结合商业…

java--接口概述

1.认识接口 ①java提供了一个关键字interface&#xff0c;用这个关键字我们可以定义出一个特殊的结构&#xff1a;接口。 ②注意&#xff1a;接口不能创建对象&#xff1b;接口是用来被类实现(implements)的&#xff0c;实现接口的类称为实现类。 ③一个类可以实现多个接口(接…

14、pytest像用参数一样使用fixture

官方实例 # content of test_fruit.py import pytestclass Fruit:def __init__(self, name):self.name nameself.cubed Falsedef cube(self):self.cubed Trueclass FruitSalad:def __init__(self, *fruit_bowl):self.fruit fruit_bowlself._cube_fruit()def _cube_fruit(s…

如何使用Node.js快速创建本地HTTP服务器并实现异地远程访问

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

【译】AOP- Advice Param And Order

名词解释 Advice 通知 Advice Param Spring 提供完全类型化的Advice&#xff0c;这意味着您可以在Advice签名中声明所需的参数&#xff08;正如我们之前在返回和抛出示例中看到的那样&#xff09;&#xff0c;而不是一直使用Object[]数组。我们将在本节后面看到如何使参数和其他…

MySQL基础『数据类型』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.数据类型一览2.整型2.1.INT2.2.BIT 3.浮点数3.1.FLOAT3.2.DECIMAL3…

Spring Cache快速入门教程及案例

1. Spring Cache介绍 Spring Cache提供了一组注解&#xff0c;使开发者能够轻松地在方法上定义缓存行为 Spring Cache抽象了缓存的底层实现&#xff0c;允许开发者选择使用不同的缓存提供者&#xff08;如 Ehcache、Redis、Caffeine 等&#xff09;。通过配置相应的缓存管理器…

java读取微信p12证书信息

import java.security.*; import java.security.cert.X509Certificate; public class TestController { /*** 获取私钥*/public static void main(String args[]) throws Exception {String mchId "商户号";KeyStore ks KeyStore.getInstance("PKCS12");…

倚天屠龙:Github Copilot vs Cursor

武林至尊&#xff0c;宝刀屠龙。号令天下&#xff0c;莫敢不从。倚天不出&#xff0c;谁与争锋&#xff01; 作为开发人员吃饭的家伙&#xff0c;一款好的开发工具对开发人员的帮助是无法估量的。还记得在学校读书的时候&#xff0c;当时流行CS架构的RAD&#xff0c;Delphi和V…

香港虚拟信用卡如何办理,支持香港apple id

什么是虚拟信用卡&#xff1f; 虚拟信用卡&#xff0c;英文称之为Virtual Credit Card Numbers&#xff0c;就是指没有实体卡片&#xff0c;是基于银行卡上面的BIN码所生成的虚拟账号。通常用于进行网络交易&#xff0c;使用起来很方便&#xff0c;也很安全。 它与实体信用卡…

虚函数不能声明为static

虚函数申明为static报错 class Foo { public:Foo()default;static virtual ~Foo(){} };int main() {Foo foo;return 0; };main.cpp:10:25: error: member ‘~Foo’ cannot be declared both virtual and static static virtual ~Foo() 代码编译会报错&#xff0c;不允许同时声…

vue之mixin混入

vue之mixin混入 mixin是什么&#xff1f; 官方的解释&#xff1a; 混入 (mixin) 提供了一种非常灵活的方式&#xff0c;来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时&#xff0c;所有混入对象的选项将被“混合”进入该组件本身的…

热门文章采集器【2023】

自媒体成为了许多人追逐的梦想&#xff0c;而爆文则是迈向成功的关键一步。随着越来越多的内容涌现&#xff0c;如何找到独特而引人注目的素材成为了自媒体创作者们面临的难题。本文将深入讲解当下热门的文章采集器&#xff0c;分享使用过的工具经验。 1.文章采集器的作用&…

DevOps搭建(三)-Git安装详细步骤

前面两篇文章我们讲了如何安装swappiness安装和虚拟机。这篇我们详细讲下如何安装Git。 1、YUM源更改为阿里云镜像源 1.1、备份CentOS-Base.repo 先备份原有的 CentOS-Base.repo 文件 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup…

RAR解压软件|怎么解压文件?|软件教学

咱说正事&#xff0c;之前不是给大家推荐了几个解压软件吗。 但是发现很多小伙伴下载了不会用&#xff0c;所以&#xff01;我来了&#xff01; 之前推荐的解压精灵&#xff0c;真的超级方便&#xff01;我们一般打开压缩文件需要先解压才能查看&#xff0c;很多人都是把文件传…

YOLOv8最新结构改进:首发最新改进,极简高效,UniRepLKNet作为改进升级版RepLKNet(博客内附源代码),适用于图像识别,即插即用打破性能瓶颈

💡本篇内容:YOLOv8最新结构改进:首发最新改进,极简高效,RepLKNet改进升级版UniRepLKNet(博客内附源代码),适用于图像识别,即插即用打破性能瓶颈 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二…

C 中的指针 - 数组和字符串

0. 为什么是指针和数组&#xff1f; 在C语言中&#xff0c;指针和数组有着非常密切的关系。应该将它们放在一起讨论的原因是&#xff0c;使用数组表示法 ( arrayName[index]) 可以实现的功能也可以使用指针实现&#xff0c;通常速度更快。 1. 一维数组 让我们看看当我们写的…