Webpack简单介绍

2021-10-13

一、webpack 简介 1.1 webpack 是什么本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具（module bundler）。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图（dependency graph），然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

文章图片

1.2 webpack 五个核心概念

入口（entry）
输出（output）
loader
插件（plugin）
模式（mode）

1.2.1 Entry
入口（Entry）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
1.2.2 Output
输出（Output）指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
1.2.3 Loader
Loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
1.2.4 Plugins
插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
1.2.5 Mode
模式（Mode）指示 webpack 使用相应模式的配置。

development：开发环境
production：生产环境

二、webpack 的初体验 2.1 初始化配置 2.1.1 初始化package.json
新建文件夹webpack_demo，控制台输入npm init，一路回车

文章图片

初始化完毕生成package.json文件

文章图片

2.1.2 下载并安装webpack
输入指令：

npm install webpack webpack-cli -g 全局安装 npm install webpack webpack-cli -D 本地安装

2.2 编译打包应用 2.2.1 创建文件
在src文件夹下创建index.js文件，作为webpack的入口文件

文章图片

2.2.2 运行指令
开发环境指令：

webpack src/index.js -o build/built.js --mode=development

文章图片

build文件夹下生成built.js打包后的文件

文章图片

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令：

webpack src/index.js -o build/built.js --mode=production

功能：在开发配置功能上多了一个代码压缩
【Webpack简单介绍】生产环境下生成的built.js被压缩

文章图片

推荐阅读

上一篇：音视频同步！RTCP|音视频同步！RTCP 协议解析及代码实现

下一篇：几个HTML+CSS知识点