<commit_before># vue-cli3 webpack 配置信息分析

## vue-cli3 简介

### cli

```shell
npm install -g @vue/cli
```

1. vue create 快速搭建一个新项目
2. vue serve 构建简单页面原型
3. vue ui 开启图形化构建界面

### cli 服务

```shell
npm install -g @vue/cli-service
```

`@vue/cli-service` 构建于 webpack 和 webpack-dev-server 之上, 包含加载其它 cli 插件的核心服务、针对绝大部分应用优化过的 webpack 配置、提供 `serve`、`build`、`inspect` 命令。

1. build: `vue-cli-servive build` 默认会在 /dist 目录产生一个用于生产环境的包
2. serve: `vue-cli-service serve` 基于 webpack-dev-server 启动一个开发服务器
3. inspect: `vue-cli-service inspect` 审查当前项目的 webpack 配置

### cli 插件

babel/typescript 转译、eslint 生成、单元测试、end-to-end 测试。内建插件（@vue/cli-plugin）、社区插件（vue-cli-plugin-）

## 使用 vue-cli3 生成 webpack 配置（default）

![/img/vue-cli/1.png](/img/vue-cli/1.png)

项目生成和完毕后，切换到项目目录，执行命令 `npx vue-cli-service inspect`, 生成的 webpack 信息如下：

[webpack 配置信息](/img/vue-cli/config.js)

## 配置分析

### entry

vue-cli 配置：

```javascript
entry: {
  app: ['./src/main.js']
}
```

entry 属性主要用来配置 webpack 的入口文件, webpack 会以此文件作为入口构建项目所涉及到的内部依赖图。

单个入口语法

```javascript
entry: './path/to/my/entry/file.js'
```

对象语法

```javascript
entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
}
```

需要注意的是 vue-cli 中配置 entry 为一个数组，如果此数组中存在两个或以上文件，那么 webpack 会认为当前存在多个入口文件，但生成 chunk 时只会生成一个。

### output

output 属性只要用来告诉 webpack 在哪里（默认 `./dist`）输出其所生成的文件及文件名称。
通过 output.filename 及 output.path 设置输出的文件名称及路径。

vue-cli 配置：

```javascript
output: {
  path: 'H:\\code\\own\\test\\dist',
  filename: 'js/[name].js',
  publicPath: '/',
  chunkFilename: 'js/[name].js'
}
```

上述配置中 path 设置输出路径为项目中 dist 文件夹，filename 中设置输入的文件放在 dist/js 文件夹同时输出文件名称为 entry 对象的 key 值，其中 chunkFilename 为输出的非入口文件的名称。

#### publicPath

在 output 配置中 publicPath 在开发模式和生产模式下代表着不同的含义。在使用 webpack 开发时，通常是使用 webpack-dev-server 进行开发，因为它的热加载，实时更新。而在生产上版本的时候，则是使用 wepback 命令进行打包，生成一个 js 文件。

当使用 webpack 打包时，webpack 会在静态资源路径下面加上 publicPath 的值（使用 html-webpack-plugin）， 而在使用 webpack-dev-server 时， webpack-dev-server 却不是在静态资源的路径前添加 publicPath 而是指的是在打包时生成的静态文件所在位置。

### mode

### context

### node

### resolve

### resolveLoader

### module

### optimization

### plugins
<commit_msg>add demo code<commit_after># vue-cli3 webpack 配置信息分析

## vue-cli3 简介

### cli

```shell
npm install -g @vue/cli
```

1. vue create 快速搭建一个新项目
2. vue serve 构建简单页面原型
3. vue ui 开启图形化构建界面

### cli 服务

```shell
npm install -g @vue/cli-service
```

`@vue/cli-service` 构建于 webpack 和 webpack-dev-server 之上, 包含加载其它 cli 插件的核心服务、针对绝大部分应用优化过的 webpack 配置、提供 `serve`、`build`、`inspect` 命令。

1. build: `vue-cli-servive build` 默认会在 /dist 目录产生一个用于生产环境的包
2. serve: `vue-cli-service serve` 基于 webpack-dev-server 启动一个开发服务器
3. inspect: `vue-cli-service inspect` 审查当前项目的 webpack 配置

### cli 插件

babel/typescript 转译、eslint 生成、单元测试、end-to-end 测试。内建插件（@vue/cli-plugin）、社区插件（vue-cli-plugin-）

## 使用 vue-cli3 生成 webpack 配置（default）

![/img/vue-cli/1.png](/img/vue-cli/1.png)

项目生成和完毕后，切换到项目目录，执行命令 `npx vue-cli-service inspect`, 生成的 webpack 信息如下：

[webpack 配置信息](/img/vue-cli/config.js)

## 配置分析

### entry

vue-cli 配置：

```javascript
entry: {
  app: ['./src/main.js']
}
```

entry 属性主要用来配置 webpack 的入口文件, webpack 会以此文件作为入口构建项目所涉及到的内部依赖图。

单个入口语法

```javascript
entry: './path/to/my/entry/file.js'
```

对象语法

```javascript
entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
}
```

需要注意的是 vue-cli 中配置 entry 为一个数组，如果此数组中存在两个或以上文件，那么 webpack 会认为当前存在多个入口文件，但生成 chunk 时只会生成一个。

### output

output 属性只要用来告诉 webpack 在哪里（默认 `./dist`）输出其所生成的文件及文件名称。
通过 output.filename 及 output.path 设置输出的文件名称及路径。

vue-cli 配置：

```javascript
output: {
  path: 'H:\\code\\own\\test\\dist',
  filename: 'js/[name].js',
  publicPath: '/',
  chunkFilename: 'js/[name].js'
}
```

上述配置中 path 设置输出路径为项目中 dist 文件夹，filename 中设置输入的文件放在 dist/js 文件夹同时输出文件名称为 entry 对象的 key 值，其中 chunkFilename 为输出的非入口文件的名称。

#### publicPath

在 output 配置中 publicPath 在开发模式和生产模式下代表着不同的含义。在使用 webpack 开发时，通常是使用 webpack-dev-server 进行开发，因为它的热加载，实时更新。而在生产上版本的时候，则是使用 wepback 命令进行打包，生成一个 js 文件。

当使用 webpack 打包时，webpack 会在静态资源路径下面加上 publicPath 的值（使用 html-webpack-plugin）， 而在使用 webpack-dev-server 时， webpack-dev-server 却不是在静态资源的路径前添加 publicPath 而是指的是在打包时生成的静态文件所在位置。

### mode

mode 的设置直接关联的是 `process.env.NODE_ENV` ， 开发模式为 `development`， 生产模式为 `production` , 如果 mode 没有设置， 默认采用 `production`。

### context

### node

### resolve

### resolveLoader

### module

### optimization

### plugins

{'fraction_non_alphanumeric': 0.1508600650860065, 'fraction_numerical': 0.005113900511390051, 'mean_word_length': 4.573834196891192, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3929408', 'n_tokens_mistral': 2457, 'n_tokens_neox': 2619, 'n_words': 398}