webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
查看自己的node版本：

全局安装webpack

局部安装webpack
--save-dev 是开发时依赖，项目打包后不需要继续使用的。

为什么全局安装后，还需要局部安装呢？
在终端直接执行webpack命令，使用的全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack。

 

webpack使用流程

一、准备工作

我们创建如下文件和文件夹：

文件和文件夹解析：

• dist文件夹：用于存放之后打包的文件
• src文件夹：用于存放我们写的源文件
  • 　　main.js：项目的入口文件。具体内容查看下面详情。
  • 　　mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。
• index.html：浏览器打开展示的首页html
• package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）

mathUtils.js文件中的代码：

main.js文件中的代码：

 

 

二、对 js文件进行打包

现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。
因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。
我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写了模块化，可以对模块化的代码进行处理。（如何处理的，待会儿在原理中，我会讲解）
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
OK，如何打包呢？使用webpack的指令即可。

    将src下的main.js 打包到disk目录下的bundls.js

 

 

 

 三、使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件
文件内容有些复杂，这里暂时先不看，后续再进行分析。
bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

 入口和出口

我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个webpack.config.js文件。

局部安装webpack

目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？
因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
所以通常一个项目，都有自己局部的webpack。
第一步，项目中需要安装自己局部的webpack

• 这里我们让局部安装webpack3.6.0
• Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便。

          

　　注意：--save-dev 表示开发时依赖，webpack属于开发时依赖，帮助我们将文件打包成浏览器可识别得代码，而运行阶段不需要webpack

第二步，通过node_modules/.bin/webpack启动webpack打包  （不推荐，需要精确定位到webpack的位置，推荐使用 package.json 的方式进行配置）

 

package.json中定义启动

但是，每次执行都敲这么一长串有没有觉得不方便呢？
OK，我们可以在package.json的scripts中定义自己的执行脚本。

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。

如何执行我们的build指令呢？

 

注意：如果没有在package.json中的script中配置webpack的映射，在终端中直接通过webpack命令运行打包时，用的都是全局的webpack，只有在package.json中的script配置了webpack的映射，并

通过npm run 映射名的方式执行webpack时，用的是局部的（本地的）webpack。