https://github.com/juicecube/mlz-pack

mlz-pack
https://github.com/juicecube/mlz-pack
mlz-pack typescript webpack
Last synced: 4 months ago
JSON representation
mlz-pack
Host: GitHub
URL: https://github.com/juicecube/mlz-pack
Owner: juicecube
License: mit
Created: 2019-09-02T03:08:19.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2024-01-03T03:40:28.000Z (over 2 years ago)
Last Synced: 2025-10-19T13:47:30.889Z (8 months ago)
Topics: mlz-pack, typescript, webpack
Language: JavaScript
Size: 6.13 MB
Stars: 6
Watchers: 3
Forks: 5
Open Issues: 23
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project

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，还有相关配置 	|

| **[`svgr`](#svgr)** 	| `boolean` 	| `false` 	| 是否开启svgr，可以使svg作为组件使用 	|

| **[`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` 	| 全局变量 	|

| **[`imageminPlugin`](#imageminPlugin)** 	| `boolean` 	| `true` 	| 图片压缩配置 	|

| **[`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的配置方式见详情 	|

| **[`hardSourcePlugin`](#hardSourcePlugin)** 	| `boolean` 	| `false` 	| 开启hard-source-webpack-plugin，用于build缓存 	|

| **[`extraCssPlugin`](#extraCssPlugin)** 	| `boolean` 	| `true` 	| 是否在正式环境开启mini-css-extract-plugin 	|

| **[`libs`](#libs)** 	| `{[key:string]:string[]}` 	| `undefined` 	| 用于单独切分第三方依赖的bundle的配置 	|

| **[`splitChunks`](#splitChunks)** 	| `undefined | 'libs' | function () => object` 	| `undefined` 	| 自定义splitChunks 	|

| **[`loaderOptions`](#loaderOptions)** 	| `RuleSetRule[]` 	| `undefined` 	| loader扩展 	|

| **[`pluginOptions`](#pluginOptions)** 	| `any[]` 	| `undefined` 	| plugin扩展 	|

| **[`babel`](#babel)** 	| `any` 	| `undefined` 	| babel扩展 	|

| **[`codeInspector`](#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**

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

    },

  },

}

```

### `svgr`

Type: `boolean` Default: `false`

是否开启[svgr](https://github.com/smooth-code/svgr)

**mlz-pack.js**

```js

module.exports = {

  webpack: {

    svgr: 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},

  },

}

```

### `imageminPlugin`

Type: `boolean` Default: `true`

是否开启图片压缩

**mlz-pack.js**

```js

module.exports = {

  webpack: {

    imageminPlugin: 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

```

### `hardSourcePlugin`

Type: `boolean` Default: `false`

是否开启[hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin)，以便于build缓存的利用。

**mlz-pack.js**

```js

module.exports = {

  webpack: {

    hardSourcePlugin: true,

  },

}

```

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

    }

  },

}

```

### `splitChunks`

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

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

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

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

**mlz-pack.js**

```js

module.exports = {

  webpack: {

    splitChunks: 'libs',

    splitChunks: ()=>{

      return {

        chunks: 'all'

      };

    },

  },

}

```

### `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',

      ],

    }

  },

}

```

### `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**

```js

module.exports = {

  webpack: {

    codeInspector: {

      hotKeys: ['altKey', 'shiftKey'], // 触发功能的组合键，为 false 或者空数组则关闭组合键触发功能。 

      showSwitch: false, // 是否在页面展示一个控制源码定位功能的开关，开关打开时和按住组合键的效果是相同的

    }

  },

}

```

### TODO

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

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/juicecube/mlz-pack

Awesome Lists containing this project

README
