webpack 读取文件夹下的文件_【webpack多入口打包】单工程下的多项目结构

(注：本文以vue-cli 2.x为例)html

需求的产生

起初，咱们的项目还只是简单的一个脚手架建立的简单工程，直到有一天，公司决定在现有基础上再出一个 版本，现有内容不变，两个版本并存，后期有可能还会出现更多版本，做为前端，咱们怎么作最好呢，前端

大佬0：开个新的分支作吧，

大佬1：可是如今这个工程，已经作了大量的打包配置，而且有不少可复用的组件和封装好的类，若是有一天这些内容要作更改呢，我总不能没一个分支都去修改吧，

大佬2：咱们能够传到公司的git上，公共内容改变时只要从新pull一下就好了，

大佬n：...

小王子：咱们能够像分布式那样垂直拆分一下咱们的项目吗？提取公共部分，而后分模块进行编译，

众人：...vue

emmmmm，说的怪好，怎么实现呢，node

webpack运行过程

首先看一下默认的文件结构webpack

一个工程，默认有一个打包入口，build文件夹下存放着webpack的打包配置，包括开发环境和生产环境。 当咱们执行npm run dev(或build)时，webpack会读取build文件夹下对应的配置文件， 找到打包的入口文件(

main.js)和模板文件(

index.html)，而后经过咱们配置的loader对不一样类型文件进行解析或编译，最后生成不一样浏览器均可识别的js和index.html。

文件结构变化

既然咱们要用多入口打包，固然就不能再用一个入口文件(main.js)和模板文件(index.html)了，咱们在不一样的模块下分别建立他们，而后咱们对模块A打包， 他就自动去访问模块A的main.js和index.html； 对模块B打包，他就自动去访问模块B的main.js和index.html。 这时候咱们的文件结构就要变成这样子，git