Miss any of our Open RFC calls?Watch the recordings here! »

easepack

4.0.0 • Public • Published

Ease bundle frontend project base on webpack v4.

Install

Install with npm:

npm install --save-dev easepack

Install with yarn:

yarn add easepack --dev

Usage

Start development server:

easepack start --config

Build production files:

easepack build --config

Getting Started

  • Create project:

    • mkdir easepack-demo && cd easepack-demo
    • npm init -y
    • npm install easepack --save-dev
    easepack-demo
    |- package.json
    
  • Create the following directory structure, files and their contents:

    • project

        easepack-demo
        |- package.json
      + |- easepack.js
      + |- index.html
      + |- /src
      +   |- index.js
      
    • easepack.js

      module.exports = {
        presets: [
          [
            require.resolve('easepack/lib/config/es'),
            {
              input: 'index.html'
            }
          ]
        ]
      };
    • index.html

      <!doctype html>
      <html>
      <head>
        <title>Getting Started</title>
      </head>
      <body>
        <script src="./src/index.js"></script> 
      </body>
      </html>
    • src/index.js

      function component() {
        var element = document.createElement('div');
        element.innerHTML = 'Hello easepack!';
        return element;
      }
      document.body.appendChild(component());
  • Start development server:

    npx easepack start --config ./config.js

  • Build production files:

    npx easepack build --config ./config.js

Configuration

Easepack configuration is same with webpack except presets, which is used to preset common config. By defaults, easepack provide es and react preset, you could provide yourself presets.

{
  // like babel presets
  presets: [
    [
      string, // preset module path
      object // preset option
    ]
    // could config more preset
  ]
}

Default Presets

Easepack provide two preset, es and react. They all support follow options:

  • mode: used to config webpack mode.

    By default, easepack config mode by command, build with production, start with development.

  • context: used to config webpack contenxt, default is project root path.

  • input: used to config webpack entry, and it support html file, default is src/index.js.

  • vendors: used to dll build, recommend use in development.

    • false: disable dll build, default value
    • true: build dependencies of package.json
    • string|array|object: same with webpack entry
  • outputPath: used to config output.path, default is dist

  • publicPath: : used to config output.publicPath

  • filename: used to config bundle file name

    • filename.js: JavaScript filename
    • filename.css: CSS filename
    • filename.media: Image, Audio and other media filename
    • filename.library: used to define dll library filename
    • filename.html: HTML filename

    By default, easepack config with following rules:

    production = {
      js: '[name].[contenthash:8].js',
      css: '[name].[contenthash:8].css',
      media: '[name].[hash:8].[ext]',
      manifest: '[name].manifest.json',
      library: '[name]_library',
      html: '[name].html'
    };
    development = {
      js: '[name].js',
      css: '[name].css',
      media: '[name].[hash:8].[ext]',
      manifest: '[name].manifest.json',
      library: '[name]_library',
      html: '[name].html'
    };
  • targets: used to define babel-preset-env targets

  • env: define some special environment config

    • env.production
    • env.development

Custom Presets

Refer to source code es and react

Examples

Keywords

Install

npm i [email protected]

Version

4.0.0

License

MIT

Unpacked Size

77.1 kB

Total Files

49

Last publish

Collaborators

  • avatar