za-glove

za-glove

基于 webpack 封装的构建工具。简化对 webpack 的配置，集成常用工具，提供简洁开发服务。

使用

$ npm install za-glove -g
$ za-glove --help

基本配置

glove.js

  module.exports = {
    templatePath: './src/views',
    defaultEntry: 'mixture',
    entries: {
      mixture: {
        entry: './src/modules/mixture/index.js',
      },
      example: {
        entry: './src/modules/example/index.js',
      },
      todomvc: {
        entry: './src/modules/todomvc/index.js',
      },
      error_403: {
        entry: './src/modules/error/403.js',
        path: '/403',
      },
      error_404: {
        entry: './src/modules/error/404.js',
        path: '/404',
      },
      error_500: {
        entry: './src/modules/error/500.js',
        path: '/500',
      },
    },
    plugins: ['sass', 'react'],
    runtimeChunk: 'multiple',
    commonChunk: 'initial-4',
    injectConfig(gConfig) {
      gConfig.get('BabelLoaderOptions').plugins.push(
        [
          'import',
          [
            {
              libraryName: 'antd',
              libraryDirectory: 'es',
            },
          ],
        ],
        'react-hot-loader/babel'
      );
    },
  };

配置选项

type

node/dll/lib

contextPath

参考 webpack context
default cwd

templatePath

模版文件路径

assetPath

产出文件路径

viewPath

产出 html 文件路径，参考 assetPath
default views

publicPath

default /

htmlPublicPath

extractPublicPath

entries

构建入口

  entries: {
    example: {
      entry,        // js路径
      path,         // 开发服务访问路由，默认为当前的 key，本例子为 '/example'
      template,     // 模版名称
      templateExt,  // 模版扩展名，默认 'html'
      html,         // 是否需要生成 html 文件，默认 true
      htmlExt,      // 生产 html 文件扩展名，默认 html
    },
  },

plugins

目前有 react vue sass less typescript pug，使用时需要安装依赖。

commonChunk

webpack splitChunks 快捷选项。
支持 [true, false, 'all', 'initial', 'async', 'common']
default true true === '!all'
支持 ${chunks}-${maxInitialRequests}-${maxAsyncRequests}-${minChunks} 形式
该选项可能无法满足需求，可以通过applyConfig进行修改

runtimeChunk

webpack runtimeChunk 快捷选项。
支持 ['single', 'multiple', 'multiple-dot', true, false]
default true
该选项可能无法满足需求，可以通过applyConfig进行修改

loaderParalle

default false

uglifyParalle

default false

scriptSourceMap

default true

styleSourceMap

default false

injectConfig

  injectConfig(gConfig) {
    gConfig.get('BabelLoaderOptions').plugins.push(
      [
        'import',
        [
          {
            libraryName: 'antd',
            libraryDirectory: 'es',
          },
        ],
      ],
      'react-hot-loader/babel'
    );
  },

  injectConfig(gConfig) {
    gConfig.BabelLoaderOptions.plugins.push(
      [
        'import',
        [
          {
            libraryName: 'antd',
            libraryDirectory: 'es',
          },
        ],
      ],
      'react-hot-loader/babel'
    );
  },

applyConfig

  applyConfig({ config, gConfig, webpack }) {
    console.log(gConfig);
    config.optimization.splitChunks = {
      ...
    }
  },

开发服务配置

defaultRedirect

开发服务器对根路由的重定向

defaultEntry

开发服务器默认入口。如果没有配置，为 entries 的第一项。

proxy

开发服务器代理配置。参考 webpack dev server proxy

middleware

开发服务器中间件配置。

  middleware(app) {
    app.use((req, res, next) => {
      console.log('this is middleware');
      next();
    });
  },

gConfig选项

argv

命令行参数

argv.command

isBuild

插件选项

• BrowsersList
• BabelPresetEnvOptions
• BabelLoaderOptions
• CssLoaderOptions
• CssModuleLoaderOptions
• PostCSSLoaderOptions
• HtmlMinifyPluginOptions
• TerserPluginOptions
• OptimizeCSSAssetsPluginOptions
• DllPluginOptions
• StyleLoader
• BabelLoader
• JavaScriptRule
• CssRule
• CssModuleRule
• JavaScriptAssets
• CssAssets

TODO

[ ] 内建插件拆分
[ ] html 插件升级
[ ] babel 升级
[ ] TODO next webpack-chain

remark

  npx lerna publish --dist-tag next --no-git-tag-version
  npx lerna publish --dist-tag next --no-push --force-publish
  npx lerna publish --dist-tag next --no-push
  npx lerna version --no-push --force-publish