@mlz/pack
mlz-pack
Last updated 25 days ago by fukai .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @mlz/pack 
SYNC missed versions from official npm registry.

mlz-pack | 内置webpack的依赖处理的打包工具

Codacy Badge CircleCI

安装

本地项目安装

由于内含mozjpeg-bin,optipng-bin,sentry等binary包,需要.npmrc中添加以下配置,直接安装很大几率安装不成功。

mozjpeg_binary_site=https://npm.taobao.org/mirrors/mozjpeg-bin
optipng_binary_site=https://npm.taobao.org/mirrors/optipng-bin
sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli
npm i @mlz/pack -D

使用

支持serve和build两种命令,server用于本地开发,build用于代码构建。

package.json

{
  "scripts": {
    "start": "mlz-pack serve",
    "build": "mlz-pack build"
    ...
  }
}

serve命令的使用

Usage: mlz-pack serve [options] [entry]

serve your project in development mode

Options:
  -p, --port <port>  port used by the server (default: 8080)
  -h, --help         output usage information

build命令的使用

Usage: mlz-pack build [options] [entry]

build your project from a entry file(.js||.ts||.tsx), default: src/index.tsx

Options:
  -e, --env <environment>  dev or prod(default: prod)
  -d, --dest <dest>        output directory (default: build)
  -h, --help               output usage information

eject命令使用

Usage: mlz-pack eject [options]

eject webpack config.

Options:
  -h, --help  output usage information

自定义配置

读取项目根目录下的mlz-pack.js

Tips:

开启热加载需要在入口文件加入以下代码:

if(module.hot){
  module.hot.accept()
}

webpack配置

Name Type Default Description
rootPath string process.cwd() 项目的根目录
entryPath string \| string[] \| Entry \| EntryFunc { index: path.resolve(process.cwd(), 'src/index.tsx') } 入口文件(webpack的entry)
target string web 项目打包的目标环境
dropConsole boolean true 删除console
buildPath string build build文件
publicPath string / js,css,图片等资源前缀
assetsPublicPath string / 特别指定图片,文件等资源前缀,默认与publicPath保持一致
tsconfig string undefined tsconfig路径(可选)
devServer object {port: 8080, noInfo: true, hot: true, inline: true, historyApiFallback: true, stats: 'errors-only', open: true} dev-server相关配置
pxtorem object undefined 是否开启px转rem,还有相关配置
svgr boolean false 是否开启svgr,可以使svg作为组件使用
cssScopeName string [local]__[hash:base64:5] \| [path][name]__[local] css的className编译规则,默认:dev环境是[path][name]__[local],正式环境是[name]__[hash:base64:5]
alias {[key:string]:string} undefined 别名,可不填,默认会读tsconfig里的paths
definePlugin {[key:string]:any} undefined 全局变量
analyzePlugin boolean false 是否开启bundle分析
htmlPlugin Object {filename: 'index.html',template: path.resolve(process.cwd(), 'src/index.ejs')} htmlplugin的参数设置
sentryPlugin Object {release: version, suppressConflictError: true, deleteAfterCompile: true, filenameTransform: function(filename) { return config.publicPath + filename; }, baseSentryURL: 'https://sentry.codemao.cn/api/0',} sentryPlugin配置
hardSourcePlugin boolean false 开启hard-source-webpack-plugin,用于build缓存
extraCssPlugin boolean true 是否在正式环境开启mini-css-extract-plugin
libs {[key:string]:string[]} undefined 用于单独切分第三方依赖的bundle的配置
loaderOptions RuleSetRule[] undefined loader扩展
pluginOptions any[] undefined plugin扩展
babel any undefined babel扩展

rootPath

Type: string Default: process.cwd()

设置项目的根目录,一般不用设置。

target

Type: string Default: web

设置项目打包的目标环境,参数值有:async-node,electron-main,electron-renderer,electron-preload,node,node-webkit,web,webworker

dropConsole

Type: boolean Default: true

是否删除console

entryPath

Type: string Default: { index: path.resolve(process.cwd(), 'src/index.tsx') }

设置项目的入口文件,即webpack的entry配置(只针对单页应用进行设置,暂时没有测试过多页应用)。

mlz-pack.js

module.exports = {
  webpack: {
    entryPath: [path.join(__dirname, './src/index.tsx')],
  }
}

buildPath

Type: string Default: build

build文件夹(绝对地址),默认是path.resolve(process.cwd(), 'build')

mlz-pack.js

module.exports = {
  webpack: {
    buildPath: path.resolve(process.cwd(), 'build'),
  }
}

publicPath

Type: string Default: /

js,css,图片等资源前缀,默认是/,正式环境请设置为cdn的地址

mlz-pack.js

module.exports = {
  webpack: {
    publicPath: '/',
  }
}

assetsPublicPath

Type: string Default: /

图片,字体等资源前缀,默认与publicPath保持一致

mlz-pack.js

module.exports = {
  webpack: {
    assetsPublicPath: '/',
  }
}

tsconfig

Type: string Default: undefined

由于使用了 tsconfig-paths-webpack-plugin,默认会读取cwd的tsconfig.json中的path来设置webpack的alias。tsconfig此配置会设置该plugin的tsconfig的地址。

mlz-pack.js

module.exports = {
  webpack: {
    tsconfig: path.resolve(process.cwd(), 'tsconfig.json'),
  }
}

devServer

Type: object Default: {port: 8080, noInfo: true, hot: true, inline: true, historyApiFallback: true, stats: 'errors-only', open: true}

开发环境的server的配置,见webpack-dev-server

mlz-pack.js

module.exports = {
  webpack: {
    devServer: {
      port: '8080',
      open: true,
    },
  },
}

svgr

Type: boolean Default: false

是否开启svgr

mlz-pack.js

module.exports = {
  webpack: {
    svgr: true,
  },
}

pxtorem

Type:

{
  rootValue?:number;
  propList?:string[];
  selectorBlackList?:string[];
  replace?:boolean;
  minPixelValue?:number;
};

Default: undefined

是否开启px转rem的功能,并且设置相关配置,有关于移动端适配的方案详细参考文档移动端适配方案

{
  rootValue: 100, // 标准设计稿的根元素的font-size
  unitPrecision: 5, // 小数点位数
  propList: ['*', '!no-rem'], // 需要转换的属性
  selectorBlackList: [], // 不需要转换的属性
  replace: true,
  mediaQuery: false,
  minPixelValue: 0, // 最小值
}

mlz-pack.js

module.exports = {
  webpack: {
    pxtorem: {
      rootValue: 100,
      propList: [
        '*',
        '!min-width',
        '!border',
        '!border-left',
        '!border-right',
        '!border-top',
        '!border-bottom',
      ],
      selectorBlackList: [
        'no_rem'
      ],
    },
  },
}

cssScopeName

Type: string Default: [local]__[hash:base64:5] (prod) \| [path][name]__[local] (dev)

className的编译规则,默认:dev环境是[path][name][local],正式环境是[name][hash:base64:5]

mlz-pack.js

module.exports = {
  webpack: {
    cssScopeName: '[local]__[hash:base64:5]',
  },
}

alias

Type: {[key:string]:string} Default: undefined

别名即webpack配置中的alias,可不填,默认会读tsconfig里的paths,别名建议在tsconfig中配置。

mlz-pack.js

module.exports = {
  webpack: {
    alias: {src: path.resolve(__dirname, 'src')},
  },
}

definePlugin

Type: {[key:string]:any} Default: undefined

全局变量,即webpack中webpack.DefinePlugin的配置

mlz-pack.js

module.exports = {
  webpack: {
    definePlugin: {DEBUG: false},
  },
}

analyzePlugin

Type: boolean Default: false

是否开启bundle的分析,对于build和资源优化有很大帮助。

mlz-pack.js

module.exports = {
  webpack: {
    analyzePlugin: false,
  },
}

htmlPlugin

Type:

{
  template?:string;
  favicon?:string;
  filename?:string;
  [key:string]:any;
}

Default:

{
  filename: 'index.html',
  template: path.resolve(process.cwd(), 'src/index.ejs'),
}

html-plugin配置,用于设置HTML的编译属性

template:指html的模板可以是.html|.ejs等文件

favicon:favicon小图标的地址

filename: 编译后的HTML名称

[key:string]:any;: 指的是可写入HTML的变量

默认给了loading变量用于设置HTML的loading减少白屏时间,在HTML中可以直接使用,例如:

<!DOCTYPE html>
<html>
<head lang="zh-CN">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no" />
  <meta name=”renderer” content=”webkit”>
  <title>Juice Cube</title>
  <%= htmlWebpackPlugin.options.loading.css %>
</head>
<body>
  <div id="root">
    <%= htmlWebpackPlugin.options.loading.html %>
  </div>
  </body>
</html>

mlz-pack.js

module.exports = {
  webpack: {
    {
      filename: 'index.html',
      template: path.resolve(process.cwd(), 'src/index.ejs'),
      loading: {
        css: '',
        html: '',
      };
    }
  },
}

sentryPlugin

Type: object

Default:

{
  release: version,
  suppressConflictError: true,
  deleteAfterCompile: true,
  filenameTransform: function(filename) {
    return config.publicPath + filename;
  },
  baseSentryURL: 'https://sentry.codemao.cn/api/0',
}

sentryPlugin配置,详细可见:webpack-sentry-plugin

mlz-pack.js

module.exports = {
  webpack: {
    sentryPlugin: {
      organization: 'xxx',
      project: 'xxx',
      apiKey: 'xxx',
    },
  },
}

hardSourcePlugin

Type: boolean Default: false

是否开启hard-source-webpack-plugin,以便于build缓存的利用。

mlz-pack.js

module.exports = {
  webpack: {
    hardSourcePlugin: true,
  },
}

extraCssPlugin

Type: boolean Default: true

是否在正式环境开启mini-css-extract-plugin

mlz-pack.js

module.exports = {
  webpack: {
    extraCssPlugin: false,
  },
}

libs

Type: {[key:string]:string[]} Default: undefined

将node_modules里的包进行分类打包,根据不同包的更新频率不同有利于缓存,默认会为第三方包创建名为venderLibs的bundle。

例如下边代码会分别生成,名为vender的bundle包含reactreact-dom,名为juice的bundle包含作@mlz/pack@mlz/lint,其他的第三方依赖会在名为venderLibs的bundle

mlz-pack.js

module.exports = {
  webpack: {
    libs: {
      vender: ['react', 'react-dom'],
      juice: ['@mlz/pack', '@mlz/lint'],
    }
  },
}

loaderOptions

Type: RuleSetRule[] Default: undefined

webpack的loader扩展

mlz-pack.js

module.exports = {
  webpack: {
    loaderOptions: [
      {
        test: /\.svg$/,
        use: [
          '@svgr/webpack',
        ],
      },
    ]
  },
}

pluginOptions

Type: any[] Default: undefined

webpack的plugin扩展

mlz-pack.js

module.exports = {
  webpack: {
    pluginOptions: [
      new ProgressBarPlugin(),
    ]
  },
}

babel

Type: any Default: undefined

babel扩展

mlz-pack.js

module.exports = {
  webpack: {
    babel: {
      'presets': [
        '@babel/preset-react',
      ],
    }
  },
}

TODO

1.定制化配置: 可以通过 mlz-pack --init 初始化配置文件

Current Tags

  • 1.0.11                                ...           latest (25 days ago)

69 Versions

  • 1.0.11                                ...           25 days ago
  • 1.0.10                                ...           a month ago
  • 1.0.9                                ...           a month ago
  • 1.0.8                                ...           2 months ago
  • 1.0.5                                ...           2 months ago
  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           2 months ago
  • 1.0.0                                ...           5 months ago
  • 0.1.45                                ...           5 months ago
  • 0.1.44                                ...           5 months ago
  • 0.1.43                                ...           5 months ago
  • 0.1.42                                ...           5 months ago
  • 0.1.41                                ...           5 months ago
  • 0.1.40                                ...           5 months ago
  • 0.1.39                                ...           5 months ago
  • 0.1.38                                ...           5 months ago
  • 0.1.37                                ...           5 months ago
  • 0.1.36                                ...           6 months ago
  • 0.1.35                                ...           6 months ago
  • 0.1.34                                ...           6 months ago
  • 0.1.33                                ...           6 months ago
  • 0.1.32                                ...           6 months ago
  • 0.1.31                                ...           6 months ago
  • 0.1.28                                ...           6 months ago
  • 0.1.30                                ...           6 months ago
  • 0.1.29                                ...           6 months ago
  • 0.1.27                                ...           6 months ago
  • 0.1.26                                ...           6 months ago
  • 0.1.25                                ...           6 months ago
  • 0.1.24                                ...           6 months ago
  • 0.1.23                                ...           6 months ago
  • 0.1.22                                ...           6 months ago
  • 0.1.21                                ...           6 months ago
  • 0.1.20                                ...           6 months ago
  • 0.1.19                                ...           6 months ago
  • 0.1.18                                ...           6 months ago
  • 0.1.17                                ...           6 months ago
  • 0.1.16                                ...           6 months ago
  • 0.1.15                                ...           6 months ago
  • 0.1.14                                ...           6 months ago
  • 0.1.13                                ...           6 months ago
  • 0.1.12                                ...           6 months ago
  • 0.1.11                                ...           6 months ago
  • 0.1.10                                ...           7 months ago
  • 0.1.9                                ...           7 months ago
  • 0.1.8                                ...           7 months ago
  • 0.1.7                                ...           7 months ago
  • 0.1.6                                ...           7 months ago
  • 0.1.5                                ...           7 months ago
  • 0.1.4                                ...           7 months ago
  • 0.1.3                                ...           7 months ago
  • 0.1.2                                ...           7 months ago
  • 0.1.1                                ...           7 months ago
  • 0.1.0                                ...           7 months ago
  • 0.0.19                                ...           7 months ago
  • 0.0.18                                ...           7 months ago
  • 0.0.17                                ...           7 months ago
  • 0.0.16                                ...           7 months ago
  • 0.0.15                                ...           7 months ago
  • 0.0.14                                ...           7 months ago
  • 0.0.13                                ...           7 months ago
  • 0.0.12                                ...           7 months ago
  • 0.0.11                                ...           7 months ago
  • 0.0.10                                ...           7 months ago
  • 0.0.8                                ...           7 months ago
  • 0.0.7                                ...           7 months ago
  • 0.0.6                                ...           7 months ago
  • 0.0.5                                ...           7 months ago
  • 0.0.2                                ...           7 months ago
Downloads
Today 0
This Week 12
This Month 12
Last Day 3
Last Week 35
Last Month 223
Dependencies (58)
Dev Dependencies (21)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |