uipx-webpack-plugin v1.0.6

uipx-webpack-plugin

UI图片对比插件，帮助开发者更方便地对比 UI 图与实现效果之间的差异

Example

live Demo

安装

npm

npm install uipx-webpack-plugin -D

外链

可以直接通过外链的方式使用：

<!-- 需要在 body 元素中或者后面加载 -->
<script src="http://accforgit.github.io/lib/uipx/uipx.min.js"></script>
<script>
	UIPX({
    diffImg: 'http://example.com/example.png',
    opacityColorList: [
      [255, 255, 255]
    ]
  });
</script>
</html>

Options

使用

webpack.conf.js 文件配置里增加以下插件配置即可

// 引入插件
var UIPXPlugin = require('uipx-webpack-plugin'); 

module.exports = {
  ...

  plugins: [
    new UIPXPlugin({
      diffImg: 'http://example.com/example.png',
      opacityColorList: [
        [255, 255, 255]
      ],
      enable: true
    }),
    ...
  ]
  ...
}

uipx 作为一个调试模块，注定了需要在发布前把它去掉，为了避免人为操作失误而影响线上功能，这里建议配置如下：

package.json 文件配置：

scripts: {
  "dev": "webpack -w --debug",
  "prod": "webpack -p"
}

webpack.conf.js 配置：

// 引入插件
var UIPXPlugin = require('uipx-webpack-plugin'); 

// 接收运行参数
const argv = require('yargs')
  .describe('debug', 'debug 环境') // use 'webpack --debug'
  .argv;

module.exports = {
  ...

  plugins: [
    new UIPXPlugin({enable: !!argv.debug}),
    ...
  ]
  ...
}

这样，在开发的时候运行 npm run dev，发布的时候运行 npm run prod 即可。

webpack-dev-server 的配套用法：

用法其实跟上面一样，只是别忘记在启动脚本的时候增加 --debug 即可。如下：

// package.json
"scripts": {
  ...
  "start:dev": "webpack-dev-server --debug",
  ...
},