webpack的配置

webpack的配置

 

###   基本配置

 

如果每次都用webpack命令自己写入口文件和出口文件会很麻烦，此时我们可以使用webpack的配置。

 

> 准备工作：复制**01-webpack的起步**文件夹并粘贴在同级目录，改名为**02-webpack的配置**。

 

**1.在根目录（02-webpack的配置）下新建一个`webpack.config.js`**

 

> webpack.config.js

 

```javascript

//1.导入node的path包获取绝对路径，需要使用npm init初始化node包

const path = require('path')

 

//2.配置webpack的入口和出口

module.exports = {

  entry: './src/main.js',//入口文件

  output:{

    path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径

    filename: 'bundle.js'//打包后的文件名

  }

}

```

 

**2.在02-webpack的配置根目录执行`npm init`初始化node包，因为配置文件中用到了node的path包**

 

```shell

npm init 

```

 

初始化

**3.使用webpack打包**

 

```shell

webkpack

```

 


 

这样入口和出口的配置已经配置完成了，只需要使用webpack命令就行了。

 

4.使用自定义脚本（script）启动

 

一般来是我们使用的是

 

```shell

npm run dev//开发环境

npm run build//生产环境

```

 

在package.json中的script中加上

 

```json

"build": "webpack"

```

 

使用`npm run build`

 

```shell

npm run build

```

 

 

### 全局安装和局部安装

 

webpack有全局安装和局部安装。

 

> 局部安装

 

**使用`npm run build`执行webpack会先从本地查找是否有webpack，如果没有会使用全局的。**

 

此时本地需要安装webapck

 

```shell

npm install webpack@3.6.0 --save-dev

```

 

package.json中自动加上开发时的依赖`devDependencies`

 

再次使用`npm run build`，使用的是本地webpack版本。