[webpack] 基本配置 (一)

文章目录

      • 1.基本介绍
      • 2.功能介绍
      • 3.简单使用
        • 3.1 文件目录和内容
        • 3.2 下载依赖
        • 3.3 启动webpack
      • 4.基本配置
        • 4.1 五大核心概念
        • 4.2 基本使用

1.基本介绍

  1. Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口, 将我们整个项目所有文件编译组合成一个或多个文件输出出去。

  2. 输出的文件就是编译好的文件, Webpack 输出的文件叫做 bundle

2.功能介绍

  1. 开发模式: 仅能编译 JS 中的 ES Module 语法。
  2. 生产模式: 能编译 JS 中的 ES Module 语法, - 还能压缩 JS 代码。

3.简单使用

3.1 文件目录和内容

在这里插入图片描述

1.count.js

export default function count(x, y){return x + y;
}

2.sum.js

export default function sum(...args) {return args.reduce((p, c) => p + c, 0);
}

3.main.js

import count from "./js/count";
import sum from "./js/sum";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

3.2 下载依赖

1.初始化package.json

npm init -y

在这里插入图片描述

2.下载依赖

npm i webpack webpack-cli -D

3.3 启动webpack

1.开发模式

npx webpack ./src/main.js --mode=development

2.生产模式

npx webpack ./src/main.js --mode=production
  • npx webpack: 是用来运行本地安装 Webpack 包的。

  • ./src/main.js: 指定 Webpackmain.js 文件开始打包, 不但会打包 main.js, 还会将其依赖也一起打包进来。

  • –mode=xxx: 指定环境。

在这里插入图片描述

默认 Webpack 会将文件打包输出到 dist 目录。

index.html引用dist下的man.js

在这里插入图片描述

在这里插入图片描述

4.基本配置

4.1 五大核心概念

  1. entry(入口): 指示 Webpack 从哪个文件开始打包。
  2. output(输出): 指示 Webpack 打包完的文件输出到哪里去, 如何命名等。
  3. loader(加载器): webpack 本身只能处理 js、json 等资源, 其他资源需要借助 loader。
  4. plugins(插件): 扩展 Webpack 的功能。
  5. mode(模式): 开发模式(development), 生产模式(production)。

在这里插入图片描述

webpack.config.js:

module.exports = {// 入口entry: "",// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};

Webpack 是基于 Node.js 运行的, 所以执行commonJS规范。

4.2 基本使用

// Node.js的核心模块,专门用来处理文件路径
const path = require("path");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录,必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "dist"),// filename: 输出文件名filename: "main.js",},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "development", // 开发模式
};
npx webpack

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

24届近5年杭州电子科技大学自动化考研院校分析

今天给大家带来的是杭州电子科技大学控制考研分析 满满干货~还不快快点赞收藏 一、杭州电子科技大学 学校简介 杭州电子科技大学(Hangzhou Dianzi University),简称“杭电”,位于杭州市,是浙江省人民政…

手机便签内容不见了怎么恢复正常?

在日常生活和工作中,很多人都需要随手记录事情,例如家庭琐事、孩子相关的事情、指定时间需要完成的工作任务、会议安排等。当我们需要随时随地记录事情的时候,手机便签应用就是非常不多的选择,我们直接打开手机上的便签APP就可以新…

C++11 新特性 ---- final 和 override

一、final C中增加了final关键字&#xff0c;作用如下&#xff1a; ① 限制某个类不能被继承② 或者某个虚函数不能被重写 ① 限制某个类不能被继承 // ① 限制某个类不能被继承,也就是说这个类不能有派生类 class Base{ public:virtual void print() {cout<<"Ba…

【2.3】Java微服务:sentinel服务哨兵

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a;Java微服务 ✨特色专栏&#xff1a; 知识分享 &…

Linux网络协议和管理

Linux网络协议和管理 一.网络设备基本知识 图1-网络设备基本知识 二.TCP/IP协议栈简介 1.概述 网络协议通常工作在不同的层中&#xff0c;每一层分别负责不同的通信功能。一个协议族&#xff0c; 比如T C P / I P&#xff0c;是一组不同层次上的多个协议的组合。T C P / I P通…

One-4-All: Neural Potential Fields for Embodied Navigation 论文阅读

论文信息 题目&#xff1a;One-4-All: Neural Potential Fields for Embodied Navigation 作者&#xff1a;Sacha Morin, Miguel Saavedra-Ruiz 来源&#xff1a;arXiv 时间&#xff1a;2023 Abstract 现实世界的导航可能需要使用高维 RGB 图像进行长视野规划&#xff0c;这…

springboot(2)

springmvc 把软件系统分为3个基本部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器 &#xff08;Controller&#xff09;。 模型&#xff08;Model&#xff09;&#xff1a;Model是由一个实体Bean实现的&#xff0c;是数据的载体…

uniapp 微信小程序 echarts地图 点击显示类目

效果如图&#xff1a; 在tooltip内axisPointer内添加 label:{show:true} 即可显示“请求离婚”的标题

1. 软件生命周期C/S、B/S 架构

目录 1. 软件生命周期 2. 面向对象 2.1 面向对象分析 2.2 面向对象设计 2.3 面向对象编程 3. C/S、B/S 架构 3.1 CS 架构 3.2 BS 架构 1. 软件生命周期 软件生命周期中划分为可行性研究、需求分析、概要设计、详细设计、实现、组装(集成)测试、 确认测试、使用、维护…

【手撕C语言】多线程

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

Java基础面试题2

Java基础面试题 一、IO和多线程专题 1.介绍下进程和线程的关系 进程&#xff1a;一个独立的正在执行的程序 线程&#xff1a;一个进程的最基本的执行单位&#xff0c;执行路径 多进程&#xff1a;在操作系统中&#xff0c;同时运行多个程序 多进程的好处&#xff1a;可以充…

【电机绘图】:插补算法(一)—直线插补—逐点比较法

今日介绍学习一种使用电机作画、绘图、加工零件时需要使用的算法 &#xff1a; 插补算法 本文提供直线插补的概念基础&#xff0c;基本思路分析&#xff0c;C语言实现等&#xff0c;代码会直接贴出&#xff01; 插补算法是指在数值计算或数据处理中&#xff0c;根据已有的数据…

Elasticsearch 摄取管道 — 检测到管道的死循环

在数据处理和摄取领域&#xff0c;管道在组织和自动化数据从源到目的地的流动方面发挥着至关重要的作用。 管道是数据按顺序通过的一系列处理阶段&#xff0c;每个阶段负责特定任务。 然而&#xff0c;有时&#xff0c;管道可能会遇到一个重大挑战&#xff0c;称为 “Cycle det…

vue-cli

vue-cli脚手架 案例一&#xff1a; 案例二&#xff1a; 案例三&#xff1a; ​ 一、脚手架简介 Vue脚手架是Vue官方提供的标准化开发工具&#xff08;开发平台&#xff09;&#xff0c;它提供命令行和UI界面&#xff0c;方便创建vue工程、配置第三方依赖、编译vue工程 1. …

源码分析——HashMap(JDK1.8)源码+底层数据结构分析

文章目录 HashMap 简介底层数据结构分析JDK1.8之前JDK1.8之后 HashMap源码分析构造方法put方法get方法resize方法 HashMap常用方法测试 HashMap 简介 HashMap 主要用来存放键值对&#xff0c;它基于哈希表的Map接口实现&#xff0c;是常用的Java集合之一。 JDK1.8 之前 HashM…

【C++】STL map和set用法基本介绍

map、set用法简介 前言正式开始set构造erasefindswapcountlower_bound 和 upper_boundlower_boundupper_bound equal_rangepair multiusetfinderasecount map构造insert[ ][ ]底层原理 multimap两道题目前K个高频单词两个数组的交集 前言 首先&#xff0c;使用map和set最少要了…

关于Express 5

目录 1、概述 2、Express 5的变化 2.1 弃用或删除内容的列表&#xff1a; app.param&#xff08;name&#xff0c;fn&#xff09;名称中的前导冒号&#xff08;&#xff1a;&#xff09; app.del() app.param&#xff08;fn&#xff09; 复数方法名 res.json&#xff0…

【SpringBoot学习笔记】02. yaml配置注入

yaml配置注入 yaml基础语法 说明&#xff1a;语法要求严格&#xff01; 1、空格不能省略 2、以缩进来控制层级关系&#xff0c;只要是左边对齐的一列数据都是同一个层级的。 3、属性和值的大小写都是十分敏感的。 yaml注入配置文件 1、在springboot项目中的resources目录…

微信小程序如何配置并使用less?

1&#xff0c;检查微信开发者工具&#xff08;工具版本1.03&#xff09;————这步很重要不然后面按步骤实行后会发现急死你也还是不管用&#xff0c;我之前死在过这一步&#xff0c;所以大家不要再次踩坑了 ~ ~ 。。。 2&#xff0c;在VScode中下载Less插件 3&#xff0c;…

优思学院|成功「质量工程师」的关键技能

质量工程师是一个需要耐心、细心、坚持态度、沟通能力、协调能力的工作&#xff0c;更需要持续学习强化自身的专业知识。 质量工程师负责审核、客户投诉的调查、过程的改进以达到质量之提升&#xff0c;他們也必须要预警生产线风险、质量异常&#xff0c;并且协调不同的部門一…