Webpack简单介绍

一、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

功能：在开发配置功能上多了一个代码压缩

生产环境下生成的built.js被压缩