Question

我必须创建捆绑到单个文件中的易于配置的网站。我正在使用webpack 4.x

我已经用“配置”创建了json文件

{
  "externals": [
    { "link": "http://lynda.com", "image": "./assets/lynda.jpg" },
    { "link": "https://www.mindtools.com/community", "image": "./assets/mindtools.jpg" },
    { "link": "https://www.ted.com/talks", "image": "./assets/ted.jpg" },
    { "link": "https://stackoverflow.com", "image": "./assets/stack.jpg" }
  ]
}

我还在webpack中配置了base64-inline-loader

  // {
  //   test: /\.(jpg|jpeg|png)(\?.*)?$/,
  //   use: 'base64-inline-loader?name=[name].[ext]'
  // },
  {
    test: /\.(jpg|jpeg|png)(\?.*)?$/,
    loader: 'base64-inline-loader',
    options: {
      name: utils.assetsPath('[name].[ext]')
    }
  },

以上两种配置均无效。在vue组件中基于json数据创建的URL仍然与文件相关，当然这些链接指向404 URL。用于CSS和HTML的所有其他嵌入式图像均已正确处理。

我做错了，但是我不知道这是什么。有什么想法吗？

Answer 1

完成，但是我对这个分辨率并不满意100％。

我已通过require子句将所有数据从json移至应用程序控制器

data() {
    return {
      externals: [
        { link: "https://lynda.com", image: require('./assets/lynda.jpg') },
        { link: "https://www.mindtools.com/community", image: require('./assets/mindtools.jpg') },
        { link: "https://www.ted.com/talks", image: require('./assets/ted.jpg') },
        { link: "https://stackoverflow.com", image: require('./assets/stack.jpg') }
      ]
    };
}

在webpack网站上，我使用的是经典的网址加载器

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
    // limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

仍在寻找正常的json文件处理可能性

使用Webpack将json文件中的图像链接替换为base64编码的数据

1 个答案: