Webpack介绍和基本使用指南

更新时间：2024年02月21日 10:55:52 作者：小秀_heo

Webpack 本身功能比较少,只能处理 js 资源,一旦遇到 css 等其他资源就会报错,本文给大家讲解Webpack介绍和基本使用指南,感兴趣的朋友一起看看吧

基本使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

count.js

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

sum.js

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

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. 下载依赖

打开终端，来到项目根目录。运行以下指令：

初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

4. 启用 Webpack 开发模式

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

生产模式

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

npx webpack: 是用来运行本地安装 Webpack 包的。

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

--mode=xxx：指定模式（环境）。

5. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack，就是主要学习如何处理其他资源。

概述

Webpack：

1.两种开发模式

开发模式：代码能编译自动化运行
生产模式：代码编译优化输出

2.Webpack 基本功能

开发模式：可以编译 ES Module 语法
生产模式：可以编译 ES Module 语法，压缩 js 代码

3.Webpack 配置文件
5 个核心概念

entry
output
loader
plugins
mode

devServer 配置

4.Webpack 脚本指令用法

webpack 直接打包输出
webpack serve 启动开发服务器，内存编译打包没有输出

到此这篇关于Webpack基本使用和概述的文章就介绍到这了,更多相关Webpack基本使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript获取表单enctype属性的方法
这篇文章主要介绍了JavaScript获取表单enctype属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
JavaScript中for循环与forEach的区别详解
最近在代码审查中发现,团队成员对数组遍历方式的选择存在不少困惑,有人坚持使用传统的for循环,有人则偏爱forEach方法,双方各执一词,今天,我们就来深入探讨这个问题,帮助你在实际开发中做出更合理的选择,需要的朋友可以参考下
2025-04-04
一个挺有意思的Javascript小问题说明
目前为止,就我的猜测,javascript执行应该是先做语法分析,然后顺便分析完成了变量表(本地和全局)
2011-09-09
非常酷炫的Bootstrap图片轮播动画
这篇文章主要为大家分享了非常酷炫的Bootstrap图片轮播动画，几行jQuery和animate.css库用在基本的Bootstrap轮播组件中，感兴趣的小伙伴们可以参考一下
2016-05-05
JavaScript操作选择对象的简单实例
下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
JS鼠标事件大全推荐收藏
JS鼠标事件大全推荐收藏，整理的比较细，推荐大家看下。
2011-11-11
Next.js SSR 项目生产部署全攻略
本文主要介绍了Next.js SSR 项目生产部署全攻略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-03-03
JavaScript中类型的强制转换与隐式转换详解
类型强制Coercion是将值从一种类型转换为另一种类型的过程（例如字符串转换为数字,对象转换为布尔值等）,下面这篇文章主要给大家给大家介绍了JavaScript中类型的强制转换与隐式转换的相关资料,需要的朋友可以参考下
2021-08-08
用JS实现3D球状标签云示例代码
3D球状标签云的效果想必很多朋友在浏览网页时都有见到过吧，看起来提复杂的，其实实现起来挺容易的，感兴趣的朋友可以了解下本文
2013-12-12
基于ssm框架实现layui分页效果
这篇文章主要为大家详细介绍了基于ssm框架实现layui分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07