Giter Club home page Giter Club logo

eruda-webpack-plugin's Introduction

English | 中文 NPM

eruda-webpack-plugin

A webpack plugin of eruda to help you develop mobile app

How to use

npm i --save-dev eruda-webpack-plugin
// webpack.config.js
const ErudaWebpackPlugin = require('eruda-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 1000
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')
    }),
    new ErudaWebpackPlugin({
      entry: /index\.js$/
    })
  ]
}

Open http://localhost:1000 in your browser, you can use eruda to debug your mobile app

Using eruda's plugin

new ErudaWebpackPlugin({
  plugins: ['fps', 'timing']
})

Options

injectOnlyOnce (make sure your npm package version > 1.5.0)

Ensure eruda and it's plugins will be injected only once. You can drink a cup of coffe instead of write the regex of entry option.

Default value: true

new ErudaWebpackPlugin({
  injectOnlyOnce: true
})

force

eruda-webpack-plugin only works in development mode, if you need it in other modes, you can set force as true

Default value: false

new ErudaWebpackPlugin({
  force: true
})

tool

Choose which eruda's tools you want, by default all will be added.

new ErudaWebpackPlugin({
  tool: ['console', 'elements']
})

plugins

add eruda's plugin

new ErudaWebpackPlugin({
  plugins: ['fps', 'timing']
})

entry

the assets which should inject eruda instance

all .js assets will be injected by default

new ErudaWebpackPlugin({
  entry: [/index\.js$/, /page1\.js$/]
})

filters

the assets which don't need inject eruda instance

this option is contrary to entry

new ErudaWebpackPlugin({
  filters: [/subpage\.js$/]
})

eruda-webpack-plugin's People

Contributors

dependabot[bot] avatar huruji avatar shamork avatar tankerxyz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

eruda-webpack-plugin's Issues

eruda 实例被重复创建

对于使用了多个 entry 或者 split chunks 的项目,eruda 实例被重复创建。经检测,每一个脚本都被插入 eruda 代码。

image

内存泄露

macos: 10.13.4
nodejs: 12.10.0
koa: 2.8.1
webpack: 4.39.3

本地开发用的webpack-plugin-serve实现本地服务及热更新

复现条件:首次启动之后 -> 修改代码 -> 热更新中 -> 写入文件到磁盘(此状态产生内存泄露)

去除eruda-webpack-plugin 不存在泄露

具体配置:

    new ErudaWebapckPlugin({
      force: DEPLOY_ENV !== 'prd',
      plugins: ['fps', 'features', 'timing', 'memory', 'code', 'dom']
    })

Building error

image
I just added

new ErudaWebpackPlugin({
      force: true
    })

to my webpack plugins array

配置chainWebpack 下 eruda 实例被重复创建

在 vue 项目中通过配置 configureWebpack 下的 plugins 配置项新增 eruda,表现正常.

现期待在 dev 环境下不开启, pro 环境下根据 某个环境变量判断是否开启.

现 chainWebpack 配置时, eruda 会被实例化4-5次

config
    .when(
        isPro && process.env.ERUDA,
        config => {
          config
            .plugin('ErudaWebpackPlugin')
            .use(require('eruda-webpack-plugin'), [{ force: true }])
            .end();
        }
      );

pic

bug: The plugin does nothing.

Reason: the webpack-sources API is used incorrect.

// it is wrong
let source = assets[asset].source()
source += erudaCode
compilation.assets[asset].source = () => source
compilation.assets[asset].size = () => source.length

An asset is an instance of the Source interface. docs
This interface is not intended to change any of its values.

Should use a ConcatSource instance to add eruda code to the bundle.

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.