webpack如何实现多页面独立输出？

Question

目前文件结构如下：

- web/                  # web根目录
  - app/                # 开发目录
    - home/             # 主页目录
      + less/           # less资源目录
      + img/            # 图片资源目录
      + js/             # js&jsx资源目录
      entry.js          # webpack入口文件
      home.html         # 页面文件
    - about/            # about页目录
      + less/           # less资源目录
      + img/            # 图片资源目录
      + js/             # js&jsx资源目录
      entry.js          # webpack入口文件
      about.html        # about页面文件
  - dist/               # 编译输出目录，即发布目录
    - home/             # 编译输出的home目录
      + img/            # 编译输出的图片目录
      + css/            # 编译输出的css目录
      + js/             # 编译输出的js目录
      home.html         # 编译输出的页面文件
    - about/            # 编译输出的about目录
      + img/            # 编译输出的图片目录
      + css/            # 编译输出的css目录
      + js/             # 编译输出的js目录
      about.html        # 编译输出的页面文件
    - vendors/          # 编译输出的公共资源目录
      + js/             # 编译输出的公共js目录
      + css/            # 编译输出的公共css目录
      + img/            # 编译输出的公共图片目录
  routes.js             # 本地路由配置
  webpack.config.js     # webpack配置文件
  gulpfile.js           # gulp任务配置
  package.json          # 项目配置
  README.md             # 项目说明

我的目的是按照app下面的目录通过webpack打包，在dist目录下对应输出发布文件。以每个模块（单个不可拆分业务逻辑页面为最小模块）下的entry.js为入口文件，以*.html为业务模板，按规则打包对应目录下css、js、img，同时在html中进行引用，如果包含第三方包，把第三方包打包至vendors文件夹下。

请问在此过程中，我该如何定义webpack.config.js和gulpfile.js文件，webpack和gulp在此过程中分别充当什么角色？

初入webpack，希望能遇到高人指点一二，多谢多谢。

Answer 1

说一下个人的粗浅理解：

gulp可以任务是基于文档的任务流，说白了就是操作文档，对文档进行物理（比如，压缩，预编译）的操作。

webpack是代码层面的优化，因为它能合并公用代码，模块化。

关于多页面输出，直接配置webpack.config.js肯定比较麻烦，所以需要gulp的配合。

---

我们的项目目录结构
-app
--src
---index.js
--web
--index.jade
-bin
--webpack.config.js
gulpfile.js

思路是：

gulp建立一个编译webpack的任务：

gulp.task('webpack', function (callback) {
  var webpack = require('webpack');
  //载入webpack.config.js文件
  var productConfig = require('webpack.config.js');
  webpack(productConfig, function (err, stats) {
    if (err) {
      throw new gutil.PluginError('webpack', err);
    }
    gutil.log('[webpack]', stats.toString());
    callback();
  });
});

为了方便在html页面访问插件，推荐使用jade作为模板。然后约定，jade名称跟要载入js名称保持一致。

利用glob获取app/src/*.js作为entry列表

利用HtmlWebpackPlugin给所有jade编译并额外加载与jade文件名对应的js

下面局部webpack.config.js片段

//  添加插件
var plugins = [];
//  提取公共文件
plugins.push(new webpack.optimize.CommonsChunkPlugin('common','common-[hash].js'));


//处理html
var pages = getEntry('./app/web/*.jade');
for(var chunkname in pages){
  var conf = {
    filename: chunkname+'.html',
    template: pages[chunkname],
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: false
    },
    chunks: ['common',chunkname],  //此处是载入提取的公共js，以及jade同名js
    hash: false,
    complieConfig: compileConfig  //向jade模板传递一些数据
  }
  var titleC = compileConfig.title || {};
  var title = titleC[chunkname];
  if (title) {
    conf.title = title;
  }
  plugins.push(new HtmlWebpackPlugin(conf));
}

Answer 2

[webpack解惑：多入口文件打包策略] (http://www.cnblogs.com/lvdaba... 可以参考下

Answer 3

完全不需要gulp，光用webpack就能做到了，看这两篇：《webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板》《webpack多页应用架构系列（十三）：构建一个简单的模板布局系统》