那么会使你的配置文件变得非常的大,比如目录配置如下
那么在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的程序员一定会舍弃掉传统的网页开发方式
因为使用了它我们真的可以不用考虑很多问题了