spapack
Create SPA with little build configuration.
Last updated 2 years ago by zhbhun .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install spapack 
SYNC missed versions from official npm registry.

单页应用打包工具


用法

  • ng start --config ./config.js
  • ng build --config ./config.js

配置

app

  • 简介:app 是一个 express 实例,spapack 会根据是否配置了该属性来决定使用何种方式启动开发服务器。
  • 用法:express()
  • 默认:undefined

context

  • 简介:context(上下文)是项目所处目录的绝对路径的字符串。默认使用当前目录,但是推荐在配置中传递一个值。这使得你的配置独立于 CWD(当前执行路径)。
  • 用法:string
  • 默认:process.cwd()

input

  • 简介:应用程序的打包输入配置。

  • 用法:object | array

    {
      input: {
        name: string, // 入口标识(影响最终打包文件的名称),必填
        html: string, // HTML 入口,必填
        script: string, // JavaScript 入口,必填
      },
    }
    

    entry 也可以是数组,打包多个单页应用,每个数组元素是一个上面示例的对象。

  • 默认:undefiend

vendor

  • 简介:提取应用程序公共模块的配置,这些模块最终会合并打包成一个或多个文件,并注入到 input 配置的每一个单页应用中。

  • 用法:false | undefined | string | array

    • false / undefined:禁用公共模块的提取功能。

    • string:提取 package.json 的 dependencies 属性指定的所有依赖模块,vendor 值用于命名提取文件名称。

    • [{ async: boolean, name: string, dependencies: string[] }]:自定义公共模块的提取方式

      {
        vendor: [
          {
            name: 'base', // 基础第三方库
            dependencies: ['jquery', 'bootstrap'],
          }, {
            async: true, // 动态加载(只有程序执行到引入对应库的代码时才会加载该文件,且只需加载一次,待实现)
            name: 'rich', // 复杂交互的第三方库
            dependencies: ['ckeditor-dev', 'datatables'],
          },
        ],
      }
      

    dependencies 的值不一定是要 npm 模块名称,也可以是一个路径,只要能正常访问到对应模块。

  • 默认:undefined

output

应用程序的打包输出配置。

path

  • 简介:应用程序的打包文件输出路径
  • 用法:string
  • 默认:'build'

devServer / prodServer

  • 简介:应用程序的输出服务配置。在开发环境下,用于配置开发服务器的地址。在生产环境下,用于配置 CDN 地址。

  • 用法:object

    {
      protocol: string, // 服务协议
      host: string, // 服务域名或 IP
      port: string, // 服务端口号
      path: string, // 服务子路径
    }
    
  • 默认:

    • devServer

      {
        protocol: '',
        host: 'localhost',
        port: '3000',
        path: '/',
      }
      
    • prodServer

      {
        protocol: undefined,
        host: undefined,
        port: undefined,
        path: '/',
      }
      

filenames

  • 简介:应用程序的打包文件命名规则

  • 用法:object

    {
      js: string, // JavaScript 文件命名
      css: string, // CSS 文件命名
      media: string, // 媒体文件命名
      html: string, // HTML 文件命名
    }
    
  • 默认:

    • 开发环境

      {
        js: '[name].js',
        css: '[name].css',
        media: '[name].[hash:8].[ext]',
        html: '[name].html',
      }
      
    • 生成环境

      {
        js: '[name].[chunkhash:8].js',
        css: '[name].[contenthash:8].css',
        media: '[name].[hash:8].[ext]',
        html: '[name].html',
      }
      

proxy

  • 简介:接口代理配置,在开发环境下使用。

  • 用法: string

    {
      target: string, // 代理目标服务器地址
      headers: object, // 代理请求头配置
    }
    
  • 默认:undefined

  • 参考:http-proxy-middleware

native

Webpack 原生配置

示例

Current Tags

  • 1.1.0                                ...           latest (2 years ago)

5 Versions

  • 1.1.0                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.3.19                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 7
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |