# @mlz/pack-beta > mlz-pack Latest version **2.1.1** (published 2023-02-21) · MIT license · 0 weekly downloads ## Install ```sh npm install @mlz/pack-beta pnpm add @mlz/pack-beta yarn add @mlz/pack-beta bun add @mlz/pack-beta ``` Provides the command `mlz-pack`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.1 | | Published | 2023-02-21 | | First published | 2021-09-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 52 | | Unpacked size | 76.1 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 6 | | Author | juicecube | | Maintainers | minyillee, tianxing0923, milobluebell, webyom, fukai, tang-tang | | Keywords | webpack | ## Links - npm: https://www.npmjs.com/package/@mlz/pack-beta - Repository: https://github.com/juicecube/mlz-pack - Homepage: https://github.com/juicecube/mlz-pack#readme - Issues: https://github.com/juicecube/mlz-pack/issues - npm.io page: https://npm.io/package/@mlz/pack-beta ## Dependencies (52) - [ncp](https://npm.io/package/ncp.md) ^2.0.0 - [sass](https://npm.io/package/sass.md) ^1.44.0 - [chalk](https://npm.io/package/chalk.md) ^4.1.2 - [core-js](https://npm.io/package/core-js.md) ^3.17.3 - [postcss](https://npm.io/package/postcss.md) ^8.3.6 - [webpack](https://npm.io/package/webpack.md) ^5.53.0 - [commander](https://npm.io/package/commander.md) ^8.2.0 - [css-loader](https://npm.io/package/css-loader.md) ^6.3.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.15.5 - [sass-loader](https://npm.io/package/sass-loader.md) ^12.3.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.8.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.0 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2 - [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2 - [postcss-scss](https://npm.io/package/postcss-scss.md) ^4.0.0 - [style-loader](https://npm.io/package/style-loader.md) ^3.2.1 - [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) ^6.5.0 - [generic-names](https://npm.io/package/generic-names.md) ^3.0.0 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0 - [worker-loader](https://npm.io/package/worker-loader.md) ^3.0.8 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.1.1 - [tsconfig-paths](https://npm.io/package/tsconfig-paths.md) ^3.11.0 - [postcss-pxtorem](https://npm.io/package/postcss-pxtorem.md) ^6.0.0 - [@mlz/babel-merge](https://npm.io/package/@mlz/babel-merge.md) ^2.0.2 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.15.6 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.2.1 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.14.5 - [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.3 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^9.0.1 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.3.2 - [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0 - [postcss-import-sync2](https://npm.io/package/postcss-import-sync2.md) ^1.2.0 - [@mlz/imagemin-mozjpeg](https://npm.io/package/@mlz/imagemin-mozjpeg.md) ^8.0.1 - [@mlz/imagemin-optipng](https://npm.io/package/@mlz/imagemin-optipng.md) ^7.1.1 - [@mlz/imagemin-webpack](https://npm.io/package/@mlz/imagemin-webpack.md) ^5.1.1 - [@sentry/webpack-plugin](https://npm.io/package/@sentry/webpack-plugin.md) ^1.17.1 - [babel-plugin-const-enum](https://npm.io/package/babel-plugin-const-enum.md) ^1.1.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^1.6.2 - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.4.2 - [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.15.0 - [babel-plugin-module-resolver](https://npm.io/package/babel-plugin-module-resolver.md) ^4.1.0 - [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^3.0.2 - [speed-measure-webpack5-plugin](https://npm.io/package/speed-measure-webpack5-plugin.md) ^1.3.3 - [tsconfig-paths-webpack-plugin](https://npm.io/package/tsconfig-paths-webpack-plugin.md) ^3.5.1 - [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) ^1.7.0 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.15.0 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.15.4 - [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3 - [@mlz/babel-plugin-react-css-modules](https://npm.io/package/@mlz/babel-plugin-react-css-modules.md) ^1.1.3 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.14.5 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.14.5 - [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.14.5 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 2.1.1 (latest) — 2023-02-21 - 2.1.0 — 2022-12-02 - 2.0.11 — 2022-10-21 - 2.0.10 — 2021-12-02 - 2.0.9 — 2021-12-02 - 2.0.8 — 2021-12-01 - 2.0.7 — 2021-11-23 - 2.0.6 — 2021-11-22 - 2.0.5 — 2021-09-27 - 2.0.4 — 2021-09-27 - 2.0.3 — 2021-09-27 - 2.0.2 — 2021-09-24 - 2.0.1 — 2021-09-23 - 2.0.0 — 2021-09-23 - 2.0.0-alpha.2 — 2021-09-23 ## README # mlz-pack | 内置webpack的依赖处理的打包工具 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/4c849bc9b5664c31b61449975144e615)](https://app.codacy.com/gh/juicecube/mlz-pack?utm_source=github.com&utm_medium=referral&utm_content=juicecube/mlz-pack&utm_campaign=Badge_Grade_Dashboard) [![CircleCI](https://travis-ci.org/juicecube/mlz-pack.svg?branch=master)](https://travis-ci.org/juicecube/mlz-pack) ## 安装 本地项目安装 由于内含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 ```js { "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 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 dev or prod（default: prod） -d, --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`](#rootPath)** | `string` | `process.cwd()` | 项目的根目录 | | **[`entryPath`](#entryPath)** | `string \| string[] \| Entry \| EntryFunc` | `{ index: path.resolve(process.cwd(), 'src/index.tsx') }` | 入口文件（webpack的entry） | | **[`output`](#output)** | `Object` | [webpack: output](https://webpack.js.org/configuration/output/) | 项目打包输出的相关配置 | | **[`target`](#target)** | `string` | `web` | 项目打包的目标环境 | | **[`dropConsole`](#dropConsole)** | `boolean` | `true` | 删除console | | **[`buildPath`](#buildPath)** | `string` | `build` | build文件 | | **[`publicPath`](#publicPath)** | `string` | `/` | js,css,图片等资源前缀 | | **[`assetsPublicPath`](#assetsPublicPath)** | `string` | `/` | 特别指定图片，文件等资源前缀，默认与publicPath保持一致 | | **[`tsconfig`](#tsconfig)** | `string` | `undefined` | tsconfig路径（可选） | | **[`devServer`](#devServer)** | `object` | `{port: 8080, noInfo: true, hot: true, inline: true, historyApiFallback: true, stats: 'errors-only', open: true}` | dev-server相关配置 | | **[`pxtorem`](#pxtorem)** | `object` | `undefined` | 是否开启px转rem，还有相关配置 | | **[`cssScopeName`](#cssScopeName)** | `string` | `[local]__[hash:base64:5] \| [path][name]__[local]` | css的className编译规则，默认：dev环境是`[path][name]__[local]`，正式环境是`[name]__[hash:base64:5]` | | **[`alias`](#alias)** | `{[key:string]:string}` | `undefined` | 别名，可不填，默认会读tsconfig里的paths | | **[`definePlugin`](#definePlugin)** | `{[key:string]:any}` | `undefined` | 全局变量 | | **[`analyzePlugin`](#analyzePlugin)** | `boolean` | `false` | 是否开启bundle分析 | | **[`htmlPlugin`](#htmlPlugin)** | `Object` | `{filename: 'index.html',template: path.resolve(process.cwd(), 'src/index.ejs')}` | htmlplugin的参数设置 | | **[`sentryPlugin`](#sentryPlugin)** | `Object` | `{}` | sentryPlugin配置，更新了sentry的配置方式见详情 | | **[`extraCssPlugin`](#extraCssPlugin)** | `boolean` | `true` | 是否在正式环境开启mini-css-extract-plugin | | **[`libs`](#libs)** | `{[key:string]:string[]}` | `undefined` | 用于单独切分第三方依赖的bundle的配置 | | **[`loaderOptions`](#loaderOptions)** | `RuleSetRule[]` | `undefined` | loader扩展 | | **[`pluginOptions`](#pluginOptions)** | `any[]` | `undefined` | plugin扩展 | | **[`babel`](#babel)** | `any` | `undefined` | babel扩展 | | **[`useAntd5`](#useAntd5)** | `boolean` | `false` | 是否使用antd5 | ### `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** ```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** ```js module.exports = { webpack: { buildPath: path.resolve(process.cwd(), 'build'), } } ``` ### `publicPath` Type: `string` Default: `/` js,css,图片等资源前缀，默认是`/`，正式环境请设置为cdn的地址 **mlz-pack.js** ```js module.exports = { webpack: { publicPath: '/', } } ``` ### `assetsPublicPath` Type: `string` Default: `/` 图片，字体等资源前缀，默认与publicPath保持一致 **mlz-pack.js** ```js module.exports = { webpack: { assetsPublicPath: '/', } } ``` ### `tsconfig` Type: `string` Default: `undefined` 由于使用了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，默认会读取`cwd`的tsconfig.json中的path来设置webpack的alias。`tsconfig`此配置会设置该plugin的tsconfig的地址。 **mlz-pack.js** ```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](https://webpack.js.org/configuration/dev-server/#devserver)。 **mlz-pack.js** ```js module.exports = { webpack: { devServer: { port: '8080', open: true, }, }, } ``` ### `pxtorem` Type: ``` { rootValue?:number; propList?:string[]; selectorBlackList?:string[]; replace?:boolean; minPixelValue?:number; }; ``` Default: `undefined` 是否开启px转rem的功能，并且设置相关配置，有关于移动端适配的方案详细参考文档[移动端适配方案](https://shimo.im/docs/69JqRr9yRCGJXHDv)。 ``` { rootValue: 100, // 标准设计稿的根元素的font-size unitPrecision: 5, // 小数点位数 propList: ['*', '!no-rem'], // 需要转换的属性 selectorBlackList: [], // 不需要转换的属性 replace: true, mediaQuery: false, minPixelValue: 0, // 最小值 } ``` **mlz-pack.js** ```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** ```js module.exports = { webpack: { cssScopeName: '[local]__[hash:base64:5]', }, } ``` ### `alias` Type: `{[key:string]:string}` Default: `undefined` 别名即webpack配置中的alias，可不填，默认会读tsconfig里的paths，别名建议在tsconfig中配置。 **mlz-pack.js** ```js module.exports = { webpack: { alias: {src: path.resolve(__dirname, 'src')}, }, } ``` ### `definePlugin` Type: `{[key:string]:any}` Default: `undefined` 全局变量，即webpack中`webpack.DefinePlugin`的配置 **mlz-pack.js** ```js module.exports = { webpack: { definePlugin: {DEBUG: false}, }, } ``` ### `analyzePlugin` Type: `boolean` Default: `false` 是否开启bundle的分析，对于build和资源优化有很大帮助。 **mlz-pack.js** ```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中可以直接使用，例如： ```html Juice Cube <%= htmlWebpackPlugin.options.loading.css %>
<%= htmlWebpackPlugin.options.loading.html %>
``` **mlz-pack.js** ```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](https://webpack.js.org/configuration/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](https://github.com/getsentry/sentry-webpack-plugin#options) 由于webpack-sentry-plugin更新接口。在本库v1.1.3以上的配置方式如下： **mlz-pack.js** ```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 ``` ### `extraCssPlugin` Type: `boolean` Default: `true` 是否在正式环境开启[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)。 **mlz-pack.js** ```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** ```js module.exports = { webpack: { libs: { vender: ['react', 'react-dom'], juice: ['@mlz/pack', '@mlz/lint'], } }, } ``` ### `loaderOptions` Type: `RuleSetRule[]` Default: `undefined` webpack的loader扩展 **mlz-pack.js** ```js module.exports = { webpack: { loaderOptions: [ { test: /\.svg$/, use: [ '@svgr/webpack', ], }, ] }, } ``` ### `pluginOptions` Type: `any[]` Default: `undefined` webpack的plugin扩展 **mlz-pack.js** ```js module.exports = { webpack: { pluginOptions: [ new ProgressBarPlugin(), ] }, } ``` ### `babel` Type: `any` Default: `undefined` babel扩展 **mlz-pack.js** ```js module.exports = { webpack: { babel: { 'presets': [ '@babel/preset-react', ], } }, } ``` ### `useAntd5` Type: `boolean` Default: `false` 使用antd5，将不再需要使用babel-plugin-import。 **mlz-pack.js** ```js module.exports = { webpack: { useAntd5: true, }, } ``` ### TODO 1.定制化配置: 可以通过 mlz-pack --init 初始化配置文件 --- _Source: https://npm.io/package/@mlz/pack-beta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._