老师布置了一个用JAVA四个框架写系统的作业，然后想趁这个机会把前端框架也用上吧，但是因为是开发传统的网页应用，所以还是多页面更适用，于是就想着怎么来改造一下可以让webpack打包结果成多页面形式，去网上搜索一下其实已经有很多类似的文章了，这说到底也是修改webpack配置来实现的。

初识配置

在使用vue-cli创建好项目结构后，我们在build文件夹下面来找到几个属于webpack配置的选项文件：

webpack.base.conf.js：configuration，基本配置。
webpack.base.dev.conf.js：开发人员在本地跑的开发环境(dev)。
webpack.prod.conf.js：线上运行的生产环境(production)。

另外这些文件还运用到了一个依赖的utils.js，这里可以编写一些文件会公用的一些方法呀对象之类的。

最终目的

我们的预期效果是，希望能够看到index.html和register.html两个页面出现在打包结果中，并且它们各自的js文件都各自进行了打包分别到了html内。
我们的初始文件就是放在pages文件夹下的index文件夹和register文件夹下。

这里的配置思路是来自这篇文章的：https://www.cnblogs.com/moqiutao/p/8522293.html

utils.js

可以首先看看它会定义一个变量process.env.NODE_ENV === 'production'，有了这个我们可以判断它运行的时候是在生产模式下还是在开发模式下。

assetsPath是根据生产模式还是开发模式确定了项目的依赖资源如图片字体等的一些路径。

cssLoaders导出一个供vue-loader的options使用的一个配置。除了常规的css-loader，还可以附加使用postcss-loader，这样可以做兼容性的补充。他们最后都是通过generateLoaders()这个函数来决定返回值的。另外还可以配置less、sass的一些loader，然后灵活地返回目标。

styleLoaders是为.vue文件以外的单独的css文件进行处理的，给webpack提供所有和css相关的loader的配置，这里面也调用了cssLoaders。

最后定义了一个createNotifierCallback，使用了node-notifier：

它是一个跨平台系统通知的页面，当遇到错误时，能用系统原生的推送方式给你推送信息。

需要添加的部分：
我们可以在这里获取所有需要入口文件——也就是pages目录下的所有js文件。用到了一个模块叫做glob，它可以允许我们使用*号去代表所有。

exports.entries = function () {
    // 所有pages下的js文件
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js');
    var map = {}
    // 循环每一个路径
    entryFiles.forEach((filePath) => {
        // 字符串分割获取文件名
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        // 添加到结果中
        map[filename] = filePath
    })
    return map
}

然后再填写一个我们的输出配置，我们后面就是用这个填写好的输出配置去替换到原来的配置中：

exports.htmlPlugin = function () {
// 获取所有的.html
let entryHtml = glob.sync(PAGE_PATH + ‘//.html’)
let arr = []

entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
        // 模板来源
        template: filePath,
        // 文件名称
        filename: filename + '.html',
        // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
        chunks: ['manifest', 'vendor', filename],
        inject: true
    }

    if (process.env.NODE_ENV === 'production') {
        conf = merge(conf, {
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        })
    }
    arr.push(new HtmlWebpackPlugin(conf))
})
return arr

}

webpack.base.conf.js

瞅瞅这个文件的大体，发现它前面还定义了一个常量createLintingRule，是用于把握eslint语法规则的配置。然后就是一些常规的webpack配置。

修改webpack.base.conf.js
当然我们这里要修改的是这个入口为：entry: utils.entries()。
就是让我们pages下的js文件称为它的多个入口文件。

webpack.dev.conf.js

它引入了base.conf写的一些配置，用webpack-merge来合并这两者的配置。因为是在开发模式下的配置，所以这个文件还配置了热加载的一些东西。最后创建了一个promise来添加FriendlyErrorsPlugin给用户提醒编译成功的动态。

修改webpack.dev.conf.js
把原来的：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
})

单独输出注释掉。
最后在这个配置中把我们生成的配置数组concat合并进去，这样就相当于添加上了我们的所有输出配置。

webpack.prod.conf.js

也是类似于生产模式下的配置，它引入了base.conf写的一些配置。
还引入了extract-text-webpack-plugin这个插件，可以把样式单独生成文件，而不是加在头部的style标签中。

修改webpack.prod.conf.js
同样把原来的：new HtmlWebpackPlugin部分注释掉，然后concat自己写的htmlPlugin就可以了。