Question

U P D A T E D 修复了存储库中的代码

首先我知道有一些关于这个主题的帖子，但它们已经过时了（webpack 1或2）

我正在尝试为React图像设置一个webpack配置，以避免丑陋的var myImage = require('./imagePath/image.jpg');

仅当我通过scss或css （背景图像）添加图像时，它才有效，但如果我尝试在index.html或反应组件中添加图像，则不会生成它们。

我正在尝试使用文件加载器， html-loader 和 transform-react-jsx-img-import

我使用示例案例创建了 this repository 。

您可以克隆它，只需通过npm install或yarn install

安装依赖项

过去两天我一直在努力，所以任何帮助都会受到赞赏。

const autoprefixer      = require('autoprefixer'),
      DashboardPlugin   = require('webpack-dashboard/plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      HtmlPlugin        = require('html-webpack-plugin'),
      path              = require('path'),
      webpack           = require('webpack');

const isProd = process.env.NODE_ENV === 'production';



//////////////////////// FILEPATH ///////////////////////
/////////////////////////////////////////////////////////

const buildFolder = 'dist';
const PATHS = {
  src       : path.resolve(__dirname, 'src'),
  build     : path.resolve(__dirname, buildFolder),
  appJS     : path.resolve(__dirname, 'src/app.js'),
  indexHTML : path.resolve(__dirname, 'src/index.html')
}



//////////////////////// PLUGINS ////////////////////////
/////////////////////////////////////////////////////////
const HtmlPluginOptions = {
  template: PATHS.indexHTML,
  minify: {
    collapseWhitespace: true
  },
  hash: true
};

const ExtractTextPluginOptions = {
  filename: '[name].bundle.css',
  disable: !isProd,
  allChunks: true,
  ignoreOrder: false
}

const devServerOptions = {
  contentBase: PATHS.build,
  compress: true,
  port: 6969,
  stats: 'errors-only',
  open: true,
  hot: true,
  openPage: ''
};

const pluginsDev = [
  new DashboardPlugin(),
  autoprefixer,
  new HtmlPlugin(HtmlPluginOptions),
  new ExtractTextPlugin(ExtractTextPluginOptions),
  new webpack.HotModuleReplacementPlugin()
];

const pluginsProd = [
  require('autoprefixer'),
  new HtmlPlugin(HtmlPluginOptions),
  new ExtractTextPlugin(ExtractTextPluginOptions)
];

var pluginsList = isProd ? pluginsProd : pluginsDev;



//////////////////////// LOADERS ////////////////////////
/////////////////////////////////////////////////////////
const postcss = {
  loader: 'postcss-loader',
  options: {
    sourceMap: 'inline',
    plugins() {
      return [autoprefixer({ browsers: 'last 3 versions' })];
    }
  }
};

const stylesDev  = ['style-loader', 'css-loader?sourceMap', postcss, 'sass-loader?sourceMap'];
const stylesProd = ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: ['css-loader', postcss, 'sass-loader'],
  publicPath: buildFolder
});

const styles = {
  test: /\.scss$/,
  use: isProd ? stylesProd : stylesDev
};

const javascript = {
  test: /\.(js|jsx)$/,
  use: 'babel-loader',
  exclude: /node_modules/
}

const images = {
  test: /\.(jpe?g|svg|png|gif)$/i,
  use: [
    'file-loader?name=assets/img/[name].[ext]'
  ]
}

const html = {
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: ['img:src', 'link:href']
    }
  }
}



//////////////////////// WEBPACK ////////////////////////
/////////////////////////////////////////////////////////
const webpackConfig = {
  entry: {
    app: PATHS.appJS
  },
  output:  {
    path: PATHS.build,
    filename: '[name].bundle.js'
  },
  module: {
    rules: [javascript, styles, images, html]
  },
  devServer: devServerOptions,
  plugins: pluginsList
}

module.exports = webpackConfig;

有一个带有<img>标记的 ./ src / index.html 文件以及带有另一个<img>标记的 ./ src / components / App.js 文件

再次，在此先感谢。请记住，您在 this repository 中有完整的示例，请尝试显示两个徽标（webpack和react徽标）

Answer 1

以/开头的网址未被html-loader转换（请参阅'Root-relative' URLs）。大多数加载器都遵循此行为，因为这允许您使用服务器上使用未使用webpack处理的文件的现有文件。此外，如果它将URL解释为路径（就像在任何JavaScript模块中一样），它会查找文件系统的根目录，而这不是您想要的。

正如您在SCSS中所做的那样，您必须使用相对路径。

<img src="./public/assets/img/logo--webpack.svg" alt="Logo Webpack"/>

在React组件中，您不能使用html-loader，因为您实际上并不是在编写HTML，而是JSX，它是将转换为函数调用的语法糖。有关详细信息，请参阅JSX In Depth。

这意味着您必须导入图片并将其传递给src属性。

import reactLogo from '../public/assets/img/logo--react.svg';

<img src={reactLogo} alt="Logo React"/>

您可以使用Babel插件转换<img>标记并自动添加源代码的导入。通过快速搜索，我发现了babel-plugin-transform-react-jsx-img-import，但我不知道这是否有效，因为它似乎无法维护。

Answer 2

我在webpack 3配置中用来加载图片的是：

     {
        test: /\.(png|svg|jpg|webp)$/,
        use: {
          loader: 'file-loader',
        },
      },

这个代码在我的反应组件中：

import logo from '../../img/logo.png';

...

<img className={style.logo} src={logo} alt="logo" />

Repack的Webpack 3图像src问题（html-Loader＆amp; transform-react-jsx-img-import）

2 个答案: