Question

我有一个遗留项目，我在前一段时间介绍了webpack / react。

文件夹结构：

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

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

webpack config：

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文件加载器冻结

1 个答案: