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

安装

本地项目安装

由于内含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）
`output`	`Object`	webpack: output	项目打包输出的相关配置
`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`	全局变量
`imageminPlugin`	`boolean`	`true`	图片压缩配置
`analyzePlugin`	`boolean`	`false`	是否开启bundle分析
`htmlPlugin`	`Object`	`{filename: 'index.html',template: path.resolve(process.cwd(), 'src/index.ejs')}`	htmlplugin的参数设置
`sentryPlugin`	`Object`	`{}`	sentryPlugin配置，更新了sentry的配置方式见详情
`hardSourcePlugin`	`boolean`	`false`	开启hard-source-webpack-plugin，用于build缓存
`extraCssPlugin`	`boolean`	`true`	是否在正式环境开启mini-css-extract-plugin
`libs`	`{[key:string]:string[]}`	`undefined`	用于单独切分第三方依赖的bundle的配置
`splitChunks`	`undefined	'libs'	function () => object`
`loaderOptions`	`RuleSetRule[]`	`undefined`	loader扩展
`pluginOptions`	`any[]`	`undefined`	plugin扩展
`babel`	`any`	`undefined`	babel扩展
`codeInspector`	`Object`	`false`	点击页面dom跳转到对应源码,只在dev添加

`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},
  },
}

`imageminPlugin`

Type: boolean Default: true

是否开启图片压缩

mlz-pack.js

module.exports = {
  webpack: {
    imageminPlugin: 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: '',
      };
    }
  },
}

`output`

Type:

{
  filename?:string;
  chunkFilename?:string;
  [key:string]:any;
}

Default:

dev.config.js
{
  filename: 'js/[name].js',
  chunkFilename: 'js/[name].js',
  pathinfo: false,
}

product.config.js 
{
  filename: 'js/[name].[contenthash].js',
  chunkFilename: 'js/[name].[contenthash].js',
}

output，用于配置打包输出的相关配置，详细可见：webpack: output

`sentryPlugin`

Type: object

Default:

{
  include: config.buildPath,
  ignoreFile: '.sentrycliignore',
  ignore: ['node_modules'],
  configFile: 'sentry.properties',
  urlPrefix: config.publicPath,
  release: version,
}

sentryPlugin配置，详细可见：webpack-sentry-plugin

由于webpack-sentry-plugin更新接口。在本库v1.1.3以上的配置方式如下：

mlz-pack.js

module.exports = {
  webpack: {
    sentryPlugin: {},
  },
}

根目录下新建 .sentryclirc 文件

.sentryclirc

[defaults]
url = [sentry address] // 例如：https://sentry.codemao.cn
org = [sentry org] // 例如：codemao
project = xxx //project名
[auth]
token = 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,
  },
}

`postCssPlugins`

Type: Object Array postCss 解析css文件插件，配置后覆盖原有

module.exports = {
  webpack: {
    postCssPlugins: [{
      // 插件名
      name:'tailwindcss', 
      //插件配置
      options:{
        ...
      }
    }],
  },
}

`postScssPlugins`

Type: Object Array postCss 解析scss文件插件，配置后覆盖原有

module.exports = {
  webpack: {
    postCssPlugins: [{
      // 插件名
      name:'tailwindcss', 
      //插件配置
      options:{
        ...
      }
    }],
  },
}

`libs`

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

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

例如下边代码会分别生成，名为vender的bundle包含react和react-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'],
    }
  },
}

`splitChunks`

Type: undefined | 'libs' | function () => object Default: undefined

当值为undefined时，按照如上文档libsapi中的相关逻辑

当值为libs时，会将node_modules里的包进行分类打包，会将libs中的第三方包创建名为对应[key]的bundle。不在libs中的，则会按照splitChunks的chunks: 'all'规则进行拆分

当值为function类型时，必须返回一个webpack.splitChunks类型的的object。该类型时提供自定义splitChunks的功能

mlz-pack.js

module.exports = {
  webpack: {
    splitChunks: 'libs',
    splitChunks: ()=>{
      return {
        chunks: 'all'
      };
    },
  },
}

`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',
      ],
    }
  },
}

`codeInspector`

Type: Object Default: false

版本1.2.4添加点击页面dom跳转到对应源码,只在dev添加 vscode,开启跳转需要配置,参考该链接 https://inspector.fe-dev.cn/guide/start.html#_2-%E9%85%8D%E7%BD%AE-vscode-%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7

mlz-pack.js

module.exports = {
  webpack: {
    codeInspector: {
      hotKeys: ['altKey', 'shiftKey'], // 触发功能的组合键，为 false 或者空数组则关闭组合键触发功能。 
      showSwitch: false, // 是否在页面展示一个控制源码定位功能的开关，开关打开时和按住组合键的效果是相同的
    }
  },
}

TODO

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

Name		Name	Last commit message	Last commit date
Latest commit History 307 Commits
.github/workflows		.github/workflows
bin		bin
src		src
test		test
.commitlintrc.js		.commitlintrc.js
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.npmrc		.npmrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
Config.md		Config.md
FileTree.md		FileTree.md
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
mlz-pack.js		mlz-pack.js
package-lock.json		package-lock.json
package.json		package.json

License

juicecube/mlz-pack

Folders and files

Latest commit

History

Repository files navigation

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

安装

使用

自定义配置

webpack配置

rootPath

target

dropConsole

entryPath

buildPath

publicPath

assetsPublicPath

tsconfig

devServer

svgr

pxtorem

cssScopeName

alias

definePlugin

imageminPlugin

analyzePlugin

htmlPlugin

output

sentryPlugin

hardSourcePlugin

extraCssPlugin

postCssPlugins

postScssPlugins

libs

splitChunks

loaderOptions

pluginOptions

babel

codeInspector

TODO

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 33

Packages 0

Contributors 8

Languages

`rootPath`

`target`

`dropConsole`

`entryPath`

`buildPath`

`publicPath`

`assetsPublicPath`

`tsconfig`

`devServer`

`svgr`

`pxtorem`

`cssScopeName`

`alias`

`definePlugin`

`imageminPlugin`

`analyzePlugin`

`htmlPlugin`

`output`

`sentryPlugin`

`hardSourcePlugin`

`extraCssPlugin`

`postCssPlugins`

`postScssPlugins`

`libs`

`splitChunks`

`loaderOptions`

`pluginOptions`

`babel`

`codeInspector`

Packages