在日常开发中，我们经常需要用到 webpack 作为打包工具，但每次新建一个项目，都需要去配置一次，虽然配置一次之后，后面都可以进行复制，但这样还是很繁琐。而且每个人水平不一样，不可能要求所有人都非常熟悉 webpack,然后在团队开发中，我们需要对配置统一。基于这些原因，我们对 webpack 配置进行二次封装(js 文件打包拆分，css 单独打包，打包时间优化，反向代理，多入口处理等)，对外部暴露少量配置，用于满足一些特殊的要求。

使用

npm install brain-cli -D 或者 yarn add brain-cli

barin-cli 优势

基于 webpack4.x、继承 react16.x 开发环境
支持多入口
不同入口页面 css/js 单独合并压缩
支持生成 ejs,jsp 模板页面
支持 webpack dll
支持增量构建
静态文件加戳
支持反向代理
支持对指定入口文件进行编译，打包
支持多套环境配置文件切换
支持 typescript

常用命令介绍

编译命令

brain-cli dev 运行开发模式
brain-cli build dev 运行开发模式
brain-cli build prod 生产环境
brain-cli build test 测试环境
brain-cli build dist 预发布环境(一般很少用到,特殊情况可以使用)
brain-cli build -s 构建大小分析
brain-cli build dev --apps=app1,app2 (编译指定入口文件)
brain-cli build prod --apps=app1,app2 (编译指定入口文件)
brain-cli build test --apps=app1,app2 (编译指定入口文件)

.e-config

const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const chalk = require("chalk");
module.exports = {
  name: "test",
  open: true,
  defaultPort: 8001,
  server: "0.0.0.0",
  imageInLineSize: 8192,
  isTslint: true,
  publicPath: "/public/",
  devServer: {
    noInfo: true,
    proxy: {
      // '/main': {
      //     target: 'https://xxx.com/',
      //     //changeOrigin: true,
      //     secure: false,
      //         onProxyReq: (proxyReq, req, res) => {
      //             proxyReq.setHeader('host', 'xxx.com')
      //             proxyReq.setHeader('cookie', ' a=1111')
      //         }
      // },
    },
  },
  postcss: {
    // px2rem:{
    //     rootValue: 75,
    //     unitPrecision: 3,
    // },
    autoprefixer: {
      /**
       * 参考dora配置
       */
      browsers: [
        "last 2 versions",
        // "Firefox ESR",
        "Firefox >= 15",
        "> 1%",
        "ie >= 8",
        "not ie<=8",
      ],
    },
  },
  webpack: {
    dllConfig: {
      vendors: ["react", "react-dom", "invariant"],
    },
    disableReactHotLoader: false,
    happyPack: {
      open: false,
    },
    commonsChunkPlugin: ["common", "vendor"],
    plugins: [
      new ProgressBarPlugin({
        summary: false,
        format:
          `${chalk.green.bold("build [:bar]")}` +
          chalk.green.bold(":percent") +
          " (:elapsed seconds)",
        summaryContent: "",
      }),
    ],
  },
  babel: {
    query: {
      presets: [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "usage", // entry usage  entry模式兼容IE11
            corejs: "3",
            targets: {
              browsers: [
                // 浏览器
                "last 2 versions",
                "ie >= 10",
              ],
            },
          },
        ],
        /*  "@babel/preset-env", */
        "@babel/preset-react",
      ],
      cacheDirectory: true,
      plugins: [
        "add-module-exports",
        "@babel/plugin-transform-runtime",
        [
          "@babel/plugin-proposal-decorators",
          {
            legacy: true,
          },
        ],
        [
          "import",
          {
            libraryName: "antd",
            style: true,
          },
        ],
      ],
    },
  },
  htmlWebpackPlugin: {
    title: "webApp" /**/,
  },
  apps: ["app1", "app2", "app3"],
};

webpack dll build

brain-cli dll

配置参数

config.webpack.dllConfig

支持默认配置及自定义文件

vendors

默认值 ['react'],如果需要配置复杂信息，则可以由数组变成对象
{
externalUrl: ''; //可选参数 当设置了此值，则 index.html dll 文件 url 变成外部链接
value:[],// 需要打包到 dll 文件的库
options: {
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;

    // globalObject为改变全局指向
      globalObject?:'this'

}, // 可选参数
}

customDll(自定义 dll 文件)

[
{
key: '' // dll 文件名称
externalUrl?: '' // 当设置了此值，则 index.html dll 文件 url 变成外部链接
value: [],// 需要打包到 dll 文件的库
options?:{
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;

       // globalObject为改变全局指向
       globalObject?:'this'
    }

}
]

compileOptions(全局生效配置)

当在 dllConfig,配置了该参数，即可生效到所有 dll 文件，等同于配置了 options 参数，当 dll 文件指定了自身局部配置数据，则生效局部数据
{
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;

       // globalObject为改变全局指向
       globalObject?:'this'
    }

config.webpack.extend

首先它是一个函数，执行会抛出底层 loaders 等数据，当默认 loaders 不满足使用时，可以传入此配置用于扩展增强

interface ITransform{
  readonly cssModule: {
    modules: boolean;
    importLoaders: number;
    localIdentName: string;
  },
  readonly LoaderOptions: postcss_loader,
  execution:(cssModule,loader,currLoader)=>loader.use
}
interface IOptions{
  isDev:boolean;
  type:'hotLoader' | 'jsLoader' | 'tsLoader' | 'styleLoader';
  transform:ITransform
}
function (loaders:[], options:IOptions={
  isDev,loaderType,transform
})

// 例如
function (loaders,{ isDev, loaderType, transform }){
  const nodeModulesPath=path.resolve('../../', 'node_modules')
   if (type === 'js_loader') {
     if (loaders.length) {
            
      }
    }
    if (type === 'ts_loader' ) {
    }
    if (type === 'style_loader' && transform) {
      loaders.push({
            test: /\.css$/,
            use: transform.execution(null, null, null),
            include: [path.resolve(nodeModulesPath)],
          },)
    }
}

config.webpack.tsCompilePlugin

option: {
  getCustomTransformers: () => ({ // 示例， 可根据ts-loader options 文档去进行自由配置
    before: [
      createTransformer(),
      createTransformerReactJsxProps({
        components: [
          { name: 'LegionsProTable', props: 'uniqueUid', value: '' },
          { name: 'LegionsProForm', props: 'uniqueUid' },
          { name: 'LegionsProTabsForm', props: 'uniqueUid' },
          { name: 'LegionsProDataImport', props: 'uniqueUid' },
          { name: 'LegionsProConditions', props: 'uniqueUid' },
        ],
      }),
    ],
  }),
},

config.webpack.happyPack

1.配置信息

interface IHappyPack{
    /** 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。 */
    threads?: Number;
    /** 是否允许 HappyPack 输出日志，默认是 true。 */
    verbose?: Boolean;
    /** 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。 */
    threadPool?: any;
    /** 开启webpack --profile ,仍然希望HappyPack产生输出。 */
    verboseWhenProfiling?: boolean;
    /** 启用debug 用于故障排查。默认 false。 */
    debug?: boolean;
}
{
  open:false // 是否开启多线程
  /** js 线程配置 */
  procJs?: IHappyPack;
  /** ts 线程配置 */
  procTs?: IHappyPack;
}

2.开启多线程时，如果是编译 ts,tsx 文件，默认使用 ts-loader, 这时多进程下存在使用插件无法生效问题

const {
    createTransformer,
    createTransformerReactJsxProps,
  } = require('ts-plugin-legions');
// 2. create a transformer;
// the factory additionally accepts an options object which described below

// 3. create getCustomTransformer function
const getCustomTransformers = () => ({ before: [createTransformer([
    {
      libraryName: 'legions/store',
      bindings: ['StoreModules'],
    },
  ]),
  createTransformerReactJsxProps({
    components: [
      { name: 'LegionsProTable', props: 'uniqueUid', value: '' },
      { name: 'LegionsProForm', props: 'uniqueUid' },
      { name: 'LegionsProTabsForm', props: 'uniqueUid' },
      { name: 'LegionsProTabsForm', props: 'uniqueUid' },
      { name: 'LegionsProConditions', props: 'uniqueUid' },
      { name: 'HLDataImport', props: 'uniqueUid' },
    ],
  }),] });

// 4. export getCustomTransformers
module.exports = getCustomTransformers;
// webpack.ts-transformers.js


tsCompilePlugin: {
  option: {
    getCustomTransformers:path.join(__dirname, './webpack.ts-transformers.js'),
  },
},

changeLog webpack4.x

v1.1.3

【chore】优化loader加载器配置结构

v1.1.1

deprecate: 废弃部分不合适的参数配置 disableHappyPack , cssModules
chore: 优化多进程由强制开启变成可以自由控制
fix: 修复版本更新探测代码无法生效
chore: 优化控制台输出信息
chore: 升级 typescript 版本至 4.x

v1.0.8-alpha.6(2020-12-01)

feat: 新增 webpack 配置文件输出属性 output 支持自定义 library 及 libraryTarget
feat: 新增 webpack dll 配置文件输出属性 output 支持自定义 libraryTarget 及其他属性
feat: 新增 webpack dll 插件支持自定义
fix: 修复 file-loader 插件通过 require 引入文件及样式引入文件,404 问题
升级 webpack 版本 4.x

changeLog

v0.3.28-beta.3 (2020-12-01)

feat: 新增 webpack dll 配置文件输出属性 output 支持自定义 libraryTarget 及其他属性
feat: 新增 webpack dll 插件支持自定义

v0.3.28-beta.1 （2020-11-13）

feat: 新增 webpack 配置文件输出属性 output 支持自定义 library 及 libraryTarget

License

MIT

Keywords

FAQs

What is brain-cli?

Is brain-cli well maintained?

Package last updated on 23 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

brain-cli

brain-cli

介绍(Introduction)

使用

barin-cli 优势

常用命令介绍

编译命令

.e-config

webpack dll build

配置参数

config.webpack.dllConfig

config.webpack.extend

config.webpack.happyPack

changeLog webpack4.x

v1.1.3

v1.1.1

v1.0.8-alpha.6(2020-12-01)

changeLog

v0.3.28-beta.3 (2020-12-01)

v0.3.28-beta.1 （2020-11-13）

License

Keywords

Related posts

Supply Chain Attack on Axios Pulls Malicious Dependency from npm

TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware