Code Monkey home page Code Monkey logo

webpack-build-report-enhance's Introduction

@xfe-team/webpack-build-report-enhance

Installation

NPM

npm i @xfe-team/webpack-build-report-enhance --save-dev

Example

webpack.config.js

// Import the plugin
const BuildReportPlugin = require('@xfe-team/webpack-build-report-enhance')

// Let's say you build a library of React components. you build them one by one
const components = fs.readdirSync(`${SRC_DIR}/components/`)
const entries = {}

components.forEach(component => {
  const name = component.split('.')[0]
  entries[name] = `${SRC_DIR}/components/${name}`
})

// Add the plugin to your webpack config
const config = {
  entry: entries,
  plugins: [
    // other plugins ...,
    new BuildReportPlugin({
      assets: true,
      output: `${SRC_DIR}/doc/build-report.md`,
      ...
    })
  ]
}

// ...

module.exports = config

Configuration options

Option Type Default value Description
append bool false Appends the report to an existing .md file, based on the output option
assets bool true Adds the assets stats to the final report
output string 'build-report.md' Tell the plugin where you want your report to be saved. Must be an .md file !
saveStats bool false Saves the complete build stats in .build-stats.json, and allow your report to show comparisons to the last build

After your build has finished, you'll find a build-report.md file, containing:

Build report

  • Hash: 3776828640c3fab88ac5
  • Version: webpack 1.14.0
  • Time: 2813ms
  • Generated on : December 17, 2016 4:48 PM

Assets list

Asset name Asset size Size difference
AlertIllustration.js 17.41 kB +6.45 kB
Button.js 8.41 kB -
Checkbox.js 7.26 kB -
Loader.js 6.07 kB -21.12 kB
Modal.js 15.93 kB -
PhoneLoader.js 16.66 kB -4.00 kB

ChangeLog

0.0.2 (2019/10/16)

  • fix: 修复 utils/report.js 中 LLL 在 dayjs 不生效导致生成的 report 展示错误 Date "LLL" 字符串的问题

0.0.1

  • init commit

Author

She Ailun

webpack-build-report-enhance's People

Contributors

zwlyrunt40 avatar

Watchers

James Cloos avatar PsAiL avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.