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 | undefined | 自定义splitChunks | | 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添加

mlz-pack.js

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

TODO

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