使用fs模块让你在开发项目中不用重复的去修改webpack的配置文件

在使用webpack编程的过程中如果我们是按照如下配置把源文件写在项目中的

那么会使你的配置文件变得非常的大，比如目录配置如下

那么在webpack.config.js 中 你可能会写这么多的代码

所以，如果面对着100+不同界面以及js分散碎片非常多的项目，某些同学可能会立即对配置文件说

what the fuck！！。。。。。

so~

实际上这个问题我们可以通过简单的 fs模块立即解决

比如你的目录结构还是这样的

那么我们如果以html模版为主的话

可以把项目src源码进行动态读取

使用fs模块进行如下代码的编写

var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
//源文件路径
var basePath = '/src';
//html模版路径
var tplPath = '/tpl';
//js模版路径
var jsPath = '/js';
//视图文件生成路径
var viewPath = '../views';
//根据文件结构的对象设置entry的json文件
function getEntry(files){
	var entry = {};
	for(var i=0;i

如此一来，在你的项目中增加页面就不再需要修改配置文件了

现在我们就直接插入一组新的界面

下面是文件内容

好了 测试运行结果

so，使用webpack的目的就是让程序员把注意力专注在写代码上，所以

我们使用webpack的过程中要充分学习它的各种优秀的功能

并且用在项目里

后记：

webpack工具是一款非常强大的web打包工具，

虽然在配置和搭建的过程中需要大量繁琐的过程以及技术，

但是如果你真正的领悟了webpack的使用方法，相信每个用过的人都会深深的

被他的优雅之处所吸引，用过webpack的程序员一定会舍弃掉传统的网页开发方式

因为使用了它我们真的可以不用考虑很多问题了