Why webpack converts require('path to img.png') in base64?

问题

I have a chat, and a JSON file where all the history is stored. All images/video/audio link to require('path to media').

However, for some reason, when using vue-cli-service serve or vue-cli-service build, webpack skips my image which is used for Emoji, not including it in dist folder, but converting it to base64 string.

JSON looks like this:

          { type: 'emoji', author: `me`, data: { src: require('../../Media/img/smiling-face.png') } },
          { type: 'text', author: `me`, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
          { type: 'image', author: `support`, data: { src: require('../../Media/img/2.gif'), meta: '✓✓ Read' } },
          { type: 'image', author: `me`, data: { src: require('../../Media/img/1.jpg'), meta: '✓✓ Read' } },

My Emoji type message is converted to base64 for some reason, and the png image is not included in the final build.

In the browser I get the following entry: {author: "support", type: "emoji", data: {src: "data:image/png;base64,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"}}

But it should look like this: {author: "support", type: "emoji", data: {src: "img/smiling-face.png"}}

And this happens only with smiling-face.png, any other image, including other png is displayed correctly and included in the build, so can anyone say what's wrong?

Link to image "smiling-face.png": https://mega.nz/#!Ze5UzK7A!MdV23KlEou4ByfOlN0aCBc8N7KAGkvNnwPH1YFiltBE

回答1:

Vue will encode any images below 10kb into base64 and inline into your JS bundle.

You can amend vue.config.js to remove this by setting the limit to -1:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = -1
        return options
      })
  }
}

来源：https://stackoverflow.com/questions/57077663/why-webpack-converts-requirepath-to-img-png-in-base64