首页 文章

webpack文件加载器冻结

提问于
浏览 次
1

我有一个遗留项目，我在前一段时间介绍了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机器上运行它 . On a Mac, it works fine . 任何帮助，将不胜感激 .

提前致谢！

webpack webpack-file-loader

1 回答

  • 2

    我通过将outputPath设置为相对字符串（ full paths do not work ）来修复它 . 我使用完整路径作为webpack配置的输出路径 .

    解：

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

相关问题