webpack多页面，动态生成模板并插入对应的js（代码分析）

1、工具代码分析(utils.js)

var path = require('path')
var glob = require('glob')
/**
 * 读取指定路径下的文件
 * @param {String} glob 表达式
 * @param {String} base 基础路径
 */
exports.getEntries = function (globPath, base, replaceed) {
    var entries = {}
    glob.sync(globPath).forEach(function (entry) {
        //获取对应文件的名称
        var moduleName = entry.match(/(\w+).\w+$/)[1];
        if(base){
            let temp= path.relative(base,entry)
            moduleName=temp.replace(path.extname(entry),'')
            console.log(moduleName);
        }
        //moduleName 去掉第一次出现的replaceed字符串，并去掉所有‘\’
        if(replaceed){
            let idx=moduleName.indexOf(replaceed)
            if(idx>=0){
                let pre= moduleName.substring(0,idx)
                let after = moduleName.substring(idx+replaceed.length).replace(/^[\\\/]*/,'')
                moduleName=pre+after
            }
        }
        //对象key中，‘\’替换成‘/’,以便插入的代码路径是‘/’
        moduleName = moduleName.replace(/\\/g,"\/");
        entries[moduleName] = entry
    })
    return entries;
}

2、webpack配置文件（webpack.config.js）

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板生成器
var CleanPlugin = require('clean-webpack-plugin'); // 文件夹清除工具
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 文件拷贝
var utils = require('./utils.js');
var glob = require('glob')
//当前工作目录的绝对路径
var ROOT_PATH = path.resolve(__dirname);
//要打包的源代码路径
var RESOURCES_PATH = path.resolve(ROOT_PATH, 'resources');
//设置要打包的js文件为入口文件
var entrys = utils.getEntries(path.join(RESOURCES_PATH, '/static/js/**/*.js'), path.join(RESOURCES_PATH, '/static/js'));

var webpackConfig = {
  entry: entrys,
  output: {
    path: path.resolve(__dirname, 'dist'),
    //插入的js后面跟上chunkhash（文件修改后，chunkhash会变换）
    filename: 'static/js/[name].js?v=[chunkhash:7]',
  },
  module: {
    loaders: [
      {　　　　　　
      test: /\.html$/,
      loader: 'html', //处理html中图片的打包后路径问题　
      query: {
        minimize: false
      }
    }]
  },
  plugins: [
    // 清空dist文件夹
    new CleanPlugin(['dist']),
    //复制不改动的文件到对应的地址
    new CopyWebpackPlugin([{
        from: './resources/static/lib',
        to: './static/lib'
      }
    ])
  ]
}

//读取html文件，生成多个html,并把对应的js插入对应页面
let pages = utils.getEntries(path.join(RESOURCES_PATH, '/templates/**/*.html'), path.join(RESOURCES_PATH,'/templates'));
for (var page in pages) {
  let conf = {
    //输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）
    filename: 'templates/'+page + '.html',
    //本地模板文件的位置
    template: pages[page],
    /**
     * 向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
     * true或者body：所有JavaScript资源插入到body元素的底部
     * head：所有JavaScript资源插入到head元素中
     * false：所有静态资源css和JavaScript都不会注入到模板文件中
     */
    inject: true,
    //按chunks的顺序对js进行引入
    chunkSortMode: 'dependency',
    /**
     * true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
     * 例如：<script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
     */
    hash: true,
    minify: {
      //剥离HTML注释
      removeComments: true,
      //尽可能删除属性的引号
      removeAttributeQuotes: false,
      //折叠对文档树中的文本节点有贡献的空白空间
      collapseWhitespace: false
    },
    chunks:Object.keys(entrys).filter(x => {
      //return x.replace(/js[\/\\]*/,'') === page.replace(/html[\/\\]*/,'')
      return x === page
    })
  }
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}
module.exports = webpackConfig;