webpack公共文件夹的图像-Java 学习之路

为了开始使用react，我将Webpack和Babel添加到我的节点应用程序中 . 我将所有脚本导入到一个脚本中并将其设置为webpack.config.js中的条目，如下所示：

module.exports = {

entry: './src/App.js',
output: {
    path: __dirname,
    filename: 'app.js'
},
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react']
        }
    }]
}

};

启动webpack-dev-server时，脚本无法找到位于我的公共文件夹中的图像（指向服务器index.js中的静态文件夹） . 我尝试在输出中添加 - publicPath：“/ public /”但是它甚至找不到app.js了 . 在Webpack中使用我的图像的最佳方法是什么？

1 回答

1
只需将它们放在源目录中并要求它们！

src / exampleImage.jpg =你的形象

SRC / ExampleImage.js：
```
import React from 'react';
import imageUrl from './exampleImage.jpg';

export default class ExampleImage extends React.Component {
  render() {
    return <img src={imageUrl} />;
  }
}
```
将正确的加载器添加到加载器数组中（不要忘记 npm install file-loader ）：
```
{
    test: /\.(jpg|png|gif)$/,
    loaders: ['file'],
  }
```
而且你已经完成了！ Webpack会自动将图像复制到正确的目录（构建脚本所在的目录），并确保imageUrl正确并且正常工作 .

很酷的奖励：您可以使用image-webpack-loader自动缩小图像，并使用文件加载器进行自动文件名哈希以进行长期缓存 . 只需查看他们的文档以获取更多信息！
回复于 2024-04-27T09:27:37+08:00

webpack公共文件夹的图像

1 回答

相关问题