文章目录

1. 1. 打包实现
   1. 1.1. 逻辑思路
   2. 1.2. 代码实现
2. 2. 结束语

最近项目中需要搭建一个多页面的环境，包括本地路由服务和分页面打包。
本节实现单个页面或是完整页面的打包过程的过程。

打包实现

---

逻辑思路

我们规划最终打包能实现的效果：

1. 可输入目录名，来只打包对应的页面。
2. 不输入目录名的时候，则将全部页面重新打包。

如：
输入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：

{
  "scripts": {
    "build": "node build/build.js"
  }
}

这样，我们的process.argv前两个参数分别是node和build/build.js，故我们需要先去掉前面两个参数，才能获取剩余页面参数。

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 pageArray

// 取掉前两个参数，分别为node和build
process.argv.splice(0, 2)

if (process.argv.length) {
  // 若传入页面参数，则单页面打包
  pageArray = process.argv;
} else {
  // 若无传入页面参数，则全块打包
  pageArray = Object.keys(entries)
  console.log(pageArray)
}

// 开始输出loading状态
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
    // print pageName[]
    console.log(index + ': ' + val)
    // 输出目录dist/pageName
    webpackConfig.output.path = path.join(__dirname, '..', 'dist', val)
    // 入口文件设定为指定页面的入口文件
    // main.js这里为通用入口文件
    webpackConfig.entry = {}
    webpackConfig.entry[index] = path.join(__dirname, '..', 'src', val, 'main.js')
    // 添加index.html主文件
    webpackConfig.plugins = [
      new HtmlWebpackPlugin({
        // 生成出来的html文件名
        filename: 'index.html',
        // 每个html的模版，这里多个页面使用同一个模版
        template: './index.html',
        // 或使用单独的模版
        // template: './src/' + val + '/index.html',
        // 自动将引用插入html
        inject: true,
        // 每个html引用的js模块，也可以在这里加上vendor等公用模块
        // chunks: [name]
      })
    ];
    // 开启打包
    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
更欢迎来被删的前端游乐场边撸猫边学前端噢