WEBPACK4 基础入门（一）

前端的学习和工作总是离不开webpack, 不少初次接触webpack的萌新（包括我）对各种依赖的安装和配置，依赖的新旧更替，可谓是谈虎色变，总是被搅得晕头烂额，故有人戏称“如何称为webpack高级工程师”。所以我希望能够总结一下一些webpack的基本用法 ，供自己和他人参考。

什么是webpack？

官网的定义如下：

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

在使用webpack时 ， 你项目中的每一个js文件、css文件、less文件、图片等都是一个module ，这些module之间彼此引用 ，错综复杂 ，而webpack可以建立这些module之间的依赖图，产生一个或者多个bundles，实现多个文件之间共享一个文件，减少资源浪费。 除此之外，代码运行还依赖一定的工具（即依赖，如解析代码的工具，再比如服务器等等），webpack可以配置如何使用并且何时使用这些依赖的相关信息。

依赖

讲到webpack的使用 ，首先从依赖开始讲起。

依赖，我所理解的是，项目运行所要依赖的环境和工具。代码写完之后是不可能的自动执行的，正如java运行需要java虚拟机，C语言需要相应的解释器，我们的前端项目运行也需要相应的工具去支持。比如要解析css，我们需要装css-loader；将ES6语法的js解析成低版本的js，我们需要安装babel-loader和babel-core等；在前端运行，我们可以安装webpack-dev-server去建立本地服务器；再比如，我们的主角，webpack ，模块是不可能自动把自己打包的，我们需要安装webpack依赖。

安装依赖，可以使用nvm，我们来试一试

首先在你空空的项目文件夹在命令行输入 npm init 将项目初始化

输入name 、version 、description 、 test command、 keyword: webpack music lisence: MIT
​ is this OK? yes

然后我们就得到一个项目目录，里面有一个package.json,打开看看里面是什么？是不是很眼熟，里面就是我们刚才输入的name、version等内容。其实。package.json就是用来记录我们项目相关的信息，当我们安装好依赖后，也会被记录在其中。

接着继续安装 ，我们可以选择本地安装（或者局部安装），也可以选择全局安装。

• 局部安装 : npm install --save-dev xxxx (安装devDependencies) npm install --save xxxx (安装dependence)
  devDependencies一般是项目运行所需的工具, 而dependence一般是引入外部的一些库函数，如jquery 、react。

  局部安装之后，项目目录下会出现一个node_module文件夹，我们可以在里面找到我们的依赖文件

  在我们的node_modules/.bin目录下有了babel.cmd、webpack,cmd等cmd文件 ，cmd文件可以直接在命令行里运行（也就是我们在命令行内输入 webpack时，其实就是启动这个webpack.cmd脚本文件将文件打包)

• 全局安装：npm install xxx 全局安装类似，只不过不把文件安在我们的项目下 ，而是安装在别的地方（即安装nvm和node时建立的一个node_modules文件，可自己看看nvm安装过程)

  局部安装和全局安装 ：其实局部安装和全局安装所安装的文件是相同的文件 ，但是在全局安装过程中 配置了环境变量（或路径？记不清叫什么名字了），你的计算机已经知道它在哪了, 以webpack为例 ，我们只需在命令行中输入 ：webpack 就可以调用全局安装的webpack了 ，但是却不能这样直接调用局部安装的webpack, 我们需要告诉计算机它在哪 ，比如此时我切换到我的项目目录test下 ，我需要输入 node_modules/.bin/webpack才能调用

  由于我们安装的依赖文件都很大 ，所以node_modules文件也容量也特别大，这样上传和下载代码就会很麻烦 ，所以我们上传代码时可以不上传node_modules文件夹 。既然package.json记录了我们下载了哪些依赖，我们下载别人代码时，只要有package.json文件 ，根据里面的内容安装配置 ，可以使用npm install 或者 npm install –save-dev 直接安装到局部或者全局