webpack 文件加载器冻结

Question

我有一个遗留项目，前段时间我在其中引入了 webpack/react。

文件夹结构：

-webroot
    -img
-web
    -project
       - webpack.config.js
       - package.json
    -src
       - client.js

现在我想通过文件加载器添加图像加载。

webpack 配置：

const webpack = require('webpack');
const path = require('path');
const babelConfig = require('./babel.config');
const mainWebpackConfig = require('./webpack.main');

const webpackConfig = Object.assign(mainWebpackConfig, {
  mode: 'development',

  ...

  context: config.paths.project(),
  resolve: {
    modules: [config.paths.project('node_modules')],
    extensions: ['.json', '.js', '.jsx']
  },
  entry: {
    'main': [
      'babel-polyfill',
      config.paths.src('client.jsx')
    ]
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: config.paths.dist('js/src/app/desktop'),
    publicPath: '/',
  },
  module: {
    rules: [{
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          outputPath: config.paths.dist('img') // creates a path to webroot/img
        }
      }],
    }, 

    ...

源代码：

import React from "react";

const img = require('./img.png');

const ImageComponent = () => (
  <img src={img}/>
);

export default ImageComponent;

在我启动 webpack 构建后，构建在发射阶段冻结 (95%)。我在 windows 机器上运行这个。 在 Mac 上工作正常。任何帮助将不胜感激。

提前致谢！

Answer 1

我通过将 outputPath 设置为相对字符串来修复它（完整路径不起作用）。我确实使用完整路径作为 webpack 配置的输出路径。

解决方案：

     {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          publicPath: '/img/',
          outputPath: './../../../../img'
        }
      }

webpack 文件加载器冻结

webpack file-loader freezes

webpack

webpack-file-loader