如何配置

上文我们打包的时候，打包命令是 webpack main.js ../dist/bundle.js，我们每次都要设置打包的入口和出口，就很麻烦。有什么设置能设置出口和入口，免得我每次都要设置嘛？当然可以有，在项目中添加这个文件，这个文件的文件名是固定的：webpack.config.js。这个文件就是webpack的配置文件。然后你就能在这个文件中进行设置了，这是设置出入口的代码：

const path = require("path");
module.exports={//CommonJS规范
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    }
}

首先webpack本身是需要node环境进行支撑的，而我们的node也对CommonJS规范进行了支撑，所以我们在配置webpack的时候，导入导出都是用的CommonJS的规范。这里我们导出的是一个对象，对象有两个属性：

entry 入口这是相对路径
output 出口对应一个对象，对象的第一个属性是path（路径）这里要求这个路径是一个绝对路径，第二个属性：文件名

获取绝对路径

那么问题来了，我们怎么获取我们的绝对路径？
node环境中有个全局变量__dirname,这就能动态的获取我们当前文件的全局路径。最后我们还要进行拼接，因为获取全局路径后我们的位置是配置文件webpack.config.js的父文件，我们应该进入父文件的子文件夹dist。所以要拼接dist。

路径拼接

路径拼接是使用path模块中的resolve方法。首先我们得导入path模块。path模块他是node自带的一个内置模块。就像js的内置函数一样。所以不需要下载直接导入就可以使用。那么最后的路径就拼接出来了：path.resolve(__dirname,"dist")

局部安装webpack

如果我们的项目有依赖node的一些包，我们知道node这些包是通过npm工具进行管理的，那么我们首先要初始化一下npm工具

初始化npm

初始化命令：npm init，他会生成一个文件，package.json,这个文件就是npm管理我们项目中node包的文件。如果我们项目中需要用到哪些包，那么我们应该执行命令：npm install bundleName.这个时候pack.json文件就会更新，他会告诉我们我们的项目安装了哪些包，并根据安装时的命令，分为开发时依赖和运行时依赖。

开发时依赖和运行时依赖

开发时依赖，就是我开发项目的时候要用到的东西，而运行时依赖是我的项目上线后，运行这个项目的时候，依赖的东西。拿我们webpack来说，他是一个打包工具，把我们的源码打包然后放在dist文件夹中，它的使命就完成了，之后项目上线，把dist文件夹放在服务器上，运行项目，后面都不涉及打包了。所以他就是开发时依赖。再举个例子，vue。我们再运行我们项目的时候当然要用到vue，所以他就是运行时依赖。
那npm下载这些包的时候怎么区别哪些是开发时依赖哪些时运行时依赖呢？
当然是我们自己告诉它了，我们加上--save-dev那这个包就是开发时依赖，你再打开package.json看，这个包应该是放在devDependencies中所有的开发时依赖都会放在这个位置。
整理一下思路：

我们要使用npm局部安装webpack。所以应该初始化npm，npm init得到package.json
局部安装 npm install webpack@3.6.0 --save-dev，得到一个文件夹，node_modules和一个文件，package-lock.json

node_modules文件就是存放我们node依赖的包的文件。我们可以从里面找到我们安装的webpack包
package-lock.json 就是显示我们安装的依赖的实际版本。为什么还区分实际版本呢？仔细看上面那张图，webpack的版本前面有一个^,就说明实际安装的可能不是3.6.0版本，而是3.6.0及以上的版本，具体的版本是不确定的，当你安装好之后，实际版本就确定了。所以又会生成一个package-lock.json。

webpack局部安装的意义（全局和局部的区别）

为什么我们之前全局安装了webpack，后面又要局部安装webpack。这是因为项目本身是基于webpack的某个版本的。如果使用更新或者更旧版本打包可能会出现问题。所以项目通常都是自带一个特定版本的webpack，也就是局部安装的webpack。通常打包项目都是用自己的局部的webpack，而不是用全局的webpack。

如何使用局部的webpack进行打包

请注意，如果我们在终端中输入`webpack`,永远是使用全局的webpack 那我们怎么使用局部的webpack呢？

从我们局部安装的webpack启动webpack打包。 node_modules/.bin/webpack启动webpack打包

package.json可以配置脚本，是在package.json中的scripts中配置，就是一种起别名的方式。比如这里，如果我执行，npm run test就相当于执行后面的代码那我们完全可以这样做：配置另一个别名，我在终端中输入npm run aaa,就会执行webpack命令。但是和在终端中直接输入webpack是有区别的，scripts中的webpack默认会先使用局部的webpack,再去找全局的webpack

Webpack--Webpack的配置和局部安装