webpack打包vue反编译_一文搞懂 Webpack 多入口配置

作者 | SHERlocked93 来源 |  前端下午茶 授权发布最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～

1. 目标分析

1. 一个项目中保存了多个 HTML 模版，不同的模版有不同的入口，并且有各自的 router、store 等；

2. 不仅可以打包出不同 HTML，而且开发的时候也可以顺利进行调试；

3. 不同入口的文件可以引用同一份组件、图片等资源，也可以引用不同的资源；

代码仓库：multi-entry-vue示意图如下：

2. 准备工作

首先我们 vue init webpack multi-entry-vue 使用 vue-cli 创建一个 webpack 模版的项。文件结构如下：

.

├── build

├── config

├── src

│   ├── assets

│   │   └── logo.png

│   ├── components

│   │   └── HelloWorld.vue

│   ├── router

│   │   └── index.js

│   ├── App.vue

│   └── main.js

├── static

├── README.md

├── index.html

├── package-lock.json

└── package.json

这里顺便介绍在不同系统下生成目录树的方法：

1. mac 系统命令行生成目录树的方法 tree-I node_modules--dirsfirst ，这个命令的意思是，不显示 node_modules 路径的文件，并且以文件夹在前的排序方式生成目录树。如果报没有找到 tree 命令的错，安装 tree 命令行 brew install tree 即可。

2. windows 系统在目标目录下使用 tree/f1.txt 即可把当前目录树生成到一个新文件 1.txt 中。

首先我们简单介绍一下 Webpack 的相关配置项，这些配置项根据使用的 Webpack 模版不同，一般存放在 webpack.config.js 或 webpack.base.conf.js 中：

const path = require('path')

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

},

output: {

path: path.resolve(__dirname, '../dist'),

filename: 'output-file.js',

publicPath: '/'

},

module: {}, // 文件的解析 loader 配置

plugins: [], // 插件，根据需要配置各种插件

devServer: {} // 配置 dev 服务功能

}

这个配置的意思是，进行 Webpack 后，会在命令的执行目录下新建 dist 目录(如果需要的话)，并将打包 src 目录下的 main.js 和它的依赖，生成 output-file.js 放在 dist目录中。下面稍微解释一下相关配置项：

1. entry： 入口文件配置项，可以为字符串、对象、数组。以上面的对象形式为例， app 是入口名称，如果 output.filename 中有 [name] 的话，就会被替换成 app。

2. context： 是 webpack 编译时的基础目录，用于解析 entry 选项的基础目录(绝对路径)， entry 入口起点会相对于此目录查找，相当于公共目录，下面所有的目录都在这个公共目录下面。

3. output： 出口文件的配置项。

4. output/path： 打包文件输出的目录，比如上面的 dist，那么就会将输出的文件放在当前目录同级目录的 dist 文件夹下，没有这个文件夹就新建一个。可以配置为 path.resolve(__dirname,'./dist/${Date.now()}/') (md 语法不方便改成模板字符串，请自行修改)方便做持续集成。

5. output.filename： 输出的文件名称， [name] 的意为根据入口文件的名称，打包成相同的名称，有几个入口，就可以打包出几个文件。比如入口的 key 为 app，打包出来就是 app.js，入口是 my-entry，打包出来