风尚学Webpack-了解篇（1）

 图片来自webpack官网logo

目录

1、什么是Webpack？Webpack的概念？Webpack的流程？

2、为什要使用Webpack？/简化开发的方法？

3.Webpack的安装及使用？项目文件环境安装

继续webpack本地安装：

---

1、什么是Webpack？Webpack的概念？Webpack的流程？

1.什么是Webpack？Webpack的定义？概念 | webpack 中文文档

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

---

2.Webpack的流程？

WebPack是模块打包机：

它做的事情是，分析你的项目结构，

找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），

并将其打包为合适的格式以供浏览器使用。

---

2、为什要使用Webpack？/简化开发的方法？

网页可以看做是功能丰富的应用，由复杂的JavaScript代码和一大堆依赖包组成。

简化开发的复杂度方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

这些方法大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求，因此要使用webpack。

---

3.Webpack的安装及使用？项目文件环境安装

首先要安装Node.js，Node.js自带了软件包管理工具npm，可以使用npm安装各种插件。

win+r输入cmd打开黑窗口进入根目录

输入： md mypack 命令

//创建mypack文件夹

md mypack 

输入 ：  cd mypack  命令
// 进入你的项目目录 mypack目录可以随意自己建立

cd mypack

输入 ：npm init    命令  
//  初始化项目文件夹 会创建一个package.js 

npm init 

然后除了name，其它无需必填enter即可

---

Package.json 属性说明

name- 包名。version- 包的版本号。description- 包的描述。

homepage- 包的官网 url 。author- 包的作者姓名。contributors- 包的其他贡献者姓名。

dependencies- 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。

repository- 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。

main- main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require("express")。

keywords- 关键字

---

继续webpack本地安装：

1.安装webpack

npm install --save-dev webpack

2.安装webpack脚手架

npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装

---

经过以上流程，webpack局部安装已经安装完毕~