webpack打包某个文件夹下的所有js文件方法

最近遇到一个问题，如何打包某个文件夹下的所有js文件。

例如我们想打包src下common中的所有js文件。感谢stack overflow上的大神们的解答，为此将方法记录下来：

方式一：用数组将所有要打包的js路径写入。

翻看webpack的文档，看到下面的一段文字。

What happens when you pass an array to entry? Passing an array of file paths to the entryproperty creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".

 如果给entry传一个包含文件路径的数组，那么webpack将会把这些所有的文件一同打包。于是，在数组中写上所有的js文件名并打包就可以达到我们的目标。因此webpack配置如下：

打包完成后，可以看到有如下的输出：

查看dist/bundle.js文件，可以看出a.js和b.js还有c.js确实被打包在一起了。

但是可以看到这种方式的扩展性非常差，如果在common文件夹下增加了新的文件，那么就要重新修改webpack配置文件。非常不利于跟踪。

方式二：引用glob来帮忙

首先看看glob是什么。去npm上查看glob的相关信息，可以看到glob可以用类似通配符的方式来匹配文件。这，不就正好解决了我们的问题吗？

所以首先我们安装glob，执行npm intall glob --save-dev

然后在他众多的函数中，我们选择了如下这个函数，glob.sync，函数的第一个参数是pattern，就是要匹配的文件的的模式，第二个参数是可选的option对象，最重要的是这个函数的返回值，是一个string类型的数组！string就是所有满足pattern的文件名。

有了这个利器，我们将配置文件写成如下形式：

然后运行打包，看到如下的结果：

查看bundle.js也可以看到a.js和b.js和c.js文件被打包进入。如果这时候我们需要添加d.js文件，同时将他一起打包，这时候不用修改webpack的配置，就可以将d.js一同打包。

查看bundle.js可以看到d.js被一起打包了。

方式三：利用fs自己写函数获得所有js文件的路径

本质上我们要获得是指定目录下的所有的js文件的名称，所以自然也可以通过fs获得某个文件夹下js文件的路径。

因此可以在webpack中写上getDirectories函数如下（这里只是简单的实现方式）：

执行打包，可以看到控制台的输出如下：

到此，介绍了三种方法来满足我们的需要。

---end---