jfimage-helper-plugin

jfimage-helper-plugin

介绍 react 中的 img 标签的通常使用方式是:

<img src={require('@/static/images/test.png').default} />

用这个插件允许你使用

<img src="@/static/images/test.png" />

减少了require和default, 有时候也会从vue直接拷贝某块功能的代码到react中使用， 发现每个图片都需要去修改，很繁琐，使用这个插件后，图片就可以直接使用了。

安装

npm i jfimage-helper-plugin --save -D
npm i jfsource-helper-plugins --save -D
npm i modify-source-webpack-plugin --save -D

使用

找到 webpack 配置文件webpack.config.js的 plugins 配置项，新增：

const { ModifySourcePlugin } = require('modify-source-webpack-plugin')
const imageHelper = require('../custom-config/image-helper')
const sourceHelperPlugins = require('../custom-config/source-helper-plugins')

plugins: [
  new ModifySourcePlugin({
    rules: [
      {
        test: /\.jsx$/,
        modify: (source, filename) => {
          return sourceHelperPlugins(source, [
            {
              plugin: imageHelper,
              options: {}
            }
          ])
        }
      }
    ]
  })
]