Webpack介绍和基本使用指南，

Webpack介绍和基本使用指南，

目录

• 基本使用
• 1. 资源目录
• 2. 创建文件
• 3. 下载依赖
• 4. 启用 Webpack 开发模式
• 5. 观察输出文件
• 概述

基本使用

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基本使用内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• webpack-bundle-analyzer 插件配置使用方法
• Vue webpack的基本使用示例教程
• JavaScript webpack5配置及使用基本介绍
• 使用webpack5从0到1搭建一个react项目的实现步骤
• webpack中的模式(mode)使用详解
• 如何使用webpack打包一个库library的方法步骤
• 浅析webpack-bundle-analyzer在vue-cli3中的使用