Question

我的团队将公司网站的所有图片都移到了CDN中。（https://cdn.irobo.co.kr/images）但是，我想在不更改当前代码库的情况下使用这些图像，其中有很多:( reactjs代码）

<image src={require('img/common/logo.jpg')} />

这里是该网站的webpack配置：

{
  module: {
    loaders:[{
      test: /\.(png|jpg)$/,
      loader: 'file-loader?name=[name].[ext]',
    }],
  }
  ...
  resolve: {
    alias: {
      img: path.join(srcPath, 'app/img'),
    }
  }
}

这是我尝试的内容：

...
  resolve: {
    alias: {
      img: 'https://cdn.irobo.co.kr/images',
    }
  }
}

Answer 1

使用Webpack从外部网址捆绑资产

webpack的url-loader插件使您能够通过在base64中对它们进行编码来从外部URL中获取资源。

url加载器的工作方式与文件加载器类似，但可以返回数据URL   如果文件小于字节限制。

可以使用查询参数指定限制。（默认为否   极限）

请记住将url-loader插件安装为项目依赖项。

npm install --save-dev url-loader

配置url-loader插件

这是一个用于设置url-loader插件的webpack配置示例。

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    path: './build', // This is where the images and js will go
    publicPath: 'http://mycdn.com/', // used to generate URLs to e.g. images
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      // use ! to chain loaders
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};

导入应用中的资源

app.jsx

import image from '../build/image.jpg';

<img src={image} />

webpack别名中的外部URL

1 个答案: