By
被删
2017-08-12
更新日期:2017-08-12
最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。 本节实现单个页面或是完整页面的打包过程的过程。
打包实现
逻辑思路 我们规划最终打包能实现的效果:
可输入目录名,来只打包对应的页面。
不输入目录名的时候,则将全部页面重新打包。
如: 输入npm run build page1
时,打包page1
页面。 输入npm run build page1 page2
时,打包page1
和page2
页面。 输入npm run build
时,打包所有page
页面。
这里我们可以通过process.argv
获取命令行参数。
同时我们需要针对每个页面单独打包,这里我们将多个页面拆分成多个并行的任务,每个任务需要设置以下内容:
entry
:设置单个页面入口
output.path
:设置最终生成文件目录
plugins
:设置打包后index.html
,这里我们使用相同的模板
代码实现 我们的页面打包代码放置在build
文件夹下的build.js
,则我们的package.json
中的script
:
1 2 3 4 5 { "scripts" : { "build" : "node build/build.js" } }
这样,我们的process.argv
前两个参数分别是node
和build/build.js
,故我们需要先去掉前面两个参数,才能获取剩余页面参数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 var ora = require ('ora' )var rm = require ('rimraf' )var path = require ('path' )var utils = require ('./utils' )var chalk = require ('chalk' )var webpack = require ('webpack' )var webpackConfig = require ('./webpack.config' )var HtmlWebpackPlugin = require ('html-webpack-plugin' )var entries = utils.entries var pageArrayprocess.argv .splice (0 , 2 ) if (process.argv .length ) { pageArray = process.argv ; } else { pageArray = Object .keys (entries) console .log (pageArray) } var spinner = ora ('building for production...\n' )spinner.start () pageArray.forEach (function (val, index, array ) { rm (path.join (__dirname, '..' , 'dist' , val), err => { if (err) throw err console .log (index + ': ' + val) webpackConfig.output .path = path.join (__dirname, '..' , 'dist' , val) webpackConfig.entry = {} webpackConfig.entry [index] = path.join (__dirname, '..' , 'src' , val, 'main.js' ) webpackConfig.plugins = [ new HtmlWebpackPlugin ({ filename : 'index.html' , template : './index.html' , inject : true , }) ]; webpack (webpackConfig, function (err, stats ) { spinner.stop () if (err) throw err process.stdout .write (stats.toString ({ colors : true , modules : false , children : false , chunks : false , chunkModules : false }) + '\n\n' ) console .log (chalk.cyan (' Build complete.\n' )) console .log (chalk.yellow ( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) }) }) })
结束语
这里简单实现了打包逻辑,我们可以指定页面打包,也可以整项目分页面分块打包。这里还缺一些错误信息,后面我们还需要完善错误提示呢。 可参考代码github-vue-multi-pages ,主要是这套环境使用在vue上的demo。
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场 边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢