VUE2X实战开发随笔(二)

vue的单页面应用开发会把页面中全部的文件都会打包在build.js文件中，这样可能这个文件变得很大，对性能，体验都不是很好的选择；

单页面应用改成多页面应用的方法：

•  开始改造

       最主要的一步，将webpack进行改造以知足对多页面需求的支持，其实多页面，便是webpack有多个入口。在此步中，咱们主要的操做的对象是 build文件夹下的js文件。

• 首先，咱们对 utils.js进行改造
• 添加一个方法：getEntries，方法中须要使用到node的globa模块，因此须要引入 

// glob模块，用于读取webpack入口目录文件 var glob = require('glob');

exports.getEntries = function (globPath) { 

• 其次，对webpack.base.conf.js进行改造
• 删除 entry: {app: './src/main.js'},，取而代之以下：

module.exports = { ··· entry: utils.getEntries('./src/module/**/*.js'),

• 最后改造webpack.dev.conf.js和webpack.prod.conf.js
• 移除原来的HtmlWebpackPlugin

var pages = utils.getEntries('./src/module/**/*.html') for(var page in pages) { // 配置生成的html文件，定义路径等 var conf = { filename: page + '.html', template: pages[page], //模板路径 inject: true, // excludeChunks 容许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口 // 如何更好的理解这块呢？举个例子：好比本demo中包含两个模块（index和about），最好的固然是各个模块引入本身所需的js， // 而不是每一个页面都引入全部的js，你能够把下面这个excludeChunks去掉，而后npm run build，而后看编译出来的index.html和about.html就知道了 // filter：将数据过滤，而后返回符合要求的数据，Object.keys是获取JSON对象中的每一个key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }) } // 须要生成几个html文件，就配置几个HtmlWebpackPlugin对象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }　　

• 打开工程

npm run dev

在dev.server.js 文件中有打开的路径，直接跟你想要打开的html文件名

如：

var uri = 'http://localhost:' + port +'/xxx.html'