详解使用webpack构建多页面应用

├── src            │  └── views         # 每一个文件夹对应一个页面│    └── a         │      └── index.js│    └── b         │      └── index.js├── output          # 打包输出的目录|  └── ...└── template.html       # 将根据这个模版，生成各个页面的html└── webpack.config.js└── dev-server.js       # webpack-dev-server + express    

// webpack.config.jsvar glob = require('glob');var webpackConfig = {  /* 一些webpack基础配置 */  };// 获取指定路径下的入口文件function getEntries(globPath) {   var files = glob.sync(globPath),    entries = {};   files.forEach(function(filepath) {     // 取倒数第二层(view下面的文件夹)做包名     var split = filepath.split('/');     var name = split[split.length - 2];     entries[name] = './' + filepath;   });   return entries;}    var entries = getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name) {  // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry  webpackConfig.entry[name] = entries[name];    // 每个页面生成一个html  var plugin = new HtmlWebpackPlugin({    // 生成出来的html文件名    filename: name + '.html',    // 每个html的模版，这里多个页面使用同一个模版    template: './template.html',    // 自动将引用插入html    inject: true,    // 每个html引用的js模块，也可以在这里加上vendor等公用模块    chunks: [name]  });  webpackConfig.plugins.push(plugin);})

// dev-server.jsvar express = require('express')var webpack = require('webpack')var webpackConfig = require('./webpack.config')var app = express();// webpack编译器var compiler = webpack(webpackConfig);// webpack-dev-server中间件var devMiddleware = require('webpack-dev-middleware')(compiler, {  publicPath: webpackConfig.output.publicPath,  stats: {    colors: true,    chunks: false  }});app.use(devMiddleware)// 路由app.get('/:viewname?', function(req, res, next) {    var viewname = req.params.viewname     ? req.params.viewname + '.html'     : 'index.html';      var filepath = path.join(compiler.outputPath, viewname);    // 使用webpack提供的outputFileSystem  compiler.outputFileSystem.readFile(filepath, function(err, result) {    if (err) {      // something error      return next(err);    }    res.set('content-type', 'text/html');    res.send(result);    res.end();  });});module.exports = app.listen(8080, function(err) {  if (err) {    // do something    return;  }    console.log('Listening at http://localhost:' + port + '/n')})

// package.json{  scripts: {    "dev": "node ./dev-server.js"    }}