webpack的安装和基本使用

1.webpack是什么？

• 中文文网网址 中文版网址
• 官方版网址 官方版网址
  

本质上 webpack是一个现代Javascript 应用程序的静态模块打包器（module bundler）当webpack处理应用程序时 它会递归地构建一个依赖关系图（dependency graph）其中包含应用程序需要的每个模块 然后将所有这些模块打包成一个或者多个bundle

2.webpack安装

webpack是一个使用node.js实现的一个模块化代码打包工具 所以 我们需要先安装webpack 安装之前需要搭建好node.js环境

我们打开cmd之后输入这个指令安装webpack 注意：不推荐全局安装
webpack-cli: 提供webpack命令 工具 类型create-react-app
webpack:webpack代码，类似react

3.webpack的五个核心概念

3-1.Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

3-2.Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3-3.Loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript json)

3-4 Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

3-5 Mode

4.webpack的初体验

4-1.初始化 package.json

指令：npm init

4-2.下载并安装 webpack-cli

指令：
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

5.编译打包应用

5-1.创建文件

5-2. 运行指令

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development 功能：webpack 能够编译打包 js 和 json 文件，并且能将模块化语法转换成 浏览器能识别的语法。 生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production 功能：在开发配置功能上多一个功能，压缩代码

5-3.结论

webpack 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识 别的语法。 能压缩代码。

5-4.问题

不能编译打包 css、img 等文件。 不能将 js 的 es6 基本语法转化为 es5 以下语法。

6.创建项目

我们需要创建一个空的文件夹 （注意：项目目录名称 不要用 webpack ，会对 webpack 工具的使用产生冲突）

7.安装 webpack

最开始的地方会看到版本 ： webpack 1.13.2

8.a.js

创建一个a.js 在项目目录下运行

9.使用 webpack 命令打包

webpack a.js bundle.js

其运行导致 a.js 被打包到 bundle.js 文件里。
从生产的角度讲，打包一个.js 文件到另一个 .js 文件没有实际意义，不过这里是演示这个效果，往后面学习机会看到更加复杂和强大的功能了。

就会生成这个文件

10.index.html

我们会把翻译好的js引入到src里面

11.用服务器打开index.html

就会把你需要的打印出来了

12.总结

今天我们学了webpack的安装和基本使用 我们也知道了webpack的五个核心概念 每一个都干嘛用的 我们还简单的来了个小案例 特简单呢种 大家可以跟着一起来试试哦