Brauchen Sie Hilfe, webpack.config mit relativen/absoluten Pfaden zu beheben

Question

Ich versuche, meine webpack.config arbeiten mit Bildern in Unterordnern. Und ich habe Probleme damit. Ich verbrachte die letzten anderthalb Tage damit, das Internet zu durchsuchen und verschiedene Lösungen zu lesen, ohne Erfolg.

Meine src-Dateien sind:

/src/images/data/

/src/Container

Mein Problem ist: habe ich eine Strecke, die: http://localhost:7771/games/O, die von/src laden/Container auf dieser Seite versuche ich /src/images/data/NotFound.png

Wenn ich rufen Sie das Bild mit laden: <img src="../images/data/NotFound.png"/> dann das Bild zeigt, ohne ein kein Problem.

Aber wenn ich den Pfad zu <img src={require("../images/data/NotFound.png")}/> ändern, dann wird das Bild nicht angezeigt. Wenn ich überprüfen Sie das Bild mit Chrome-Entwickler-Tools Ich sehe, dass das Element als erscheint: <img src="images/data/NotFound.png"> Wenn ich das src Link Ich sehe schweben: http://localhost:7771/games/images/data/NotFound.png Aber wenn ich versuchen, diesen Link zu öffnen, wird das Bild nicht geladen wird.

Wenn ich http://localhost:7771/images/data/NotFound.png navigieren statt, dann werden die Bild Lasten.

Ich versuchte mit einem Alias ​​für Auflösung und änderte das Bild zu <img src={require("~/data/NotFound.png")}>, aber das Ergebnis ist das gleiche, das Bild wird nicht geladen.

Deshalb denke ich, dass meine webpack.config durcheinander ist und ich möchte etwas Hilfe, um herauszufinden, was falsch ist, damit mein Bild zeigen kann.

var webpack = require('webpack'); 
var path = require('path'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var CircularDependencyPlugin = require('circular-dependency-plugin'); 
var BUILD_DIR = path.resolve(__dirname,'htmlhot'); 
var APP_DIR = path.resolve(__dirname, 'src'); 
// Load environment variables from .env file. Suppress warnings using silent 
// if this file is missing. dotenv will never modify any environment variables 
// that have already been set. 
// https://github.com/motdotla/dotenv 
require('dotenv').config({silent: true}); 

var config = { 
    context: path.join(__dirname, "src"), 
    devtool: 'source-map', 
    entry: [ 
     //'webpack/hot/dev-server', 
    // reload controls falling back to page refresh if hot reload fails ( rare). 
    // change to false to debug hot reloading, so you can see the errors before it refreshes the page. 
    'webpack-hot-middleware/client?reload=true', 
    // 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 
     APP_DIR + '/index.js' 
     ], 

    output: { 
    path: path.join(__dirname, "src"), 
    filename: 'bundle-hot.js' 
    }, 
    resolve: { 
    modules: [ 
     path.join(__dirname, 'src/'), 
     'node_modules/' 
    ], 
    alias: { 
     '~': APP_DIR + '/images/' 
    } 
    }, 
    watch: true, 
    watchOptions: { 
    poll: true, 
    aggregateTimeout: 300, 
    number: 1000 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     exclude: /node_modules/, 
     loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({ 
     cacheDirectory: true, 
     plugins: [ 
      'transform-runtime', 
      'react-html-attrs', 
      'transform-class-properties', 
      'transform-decorators-legacy' 
     ], 
     presets: ['es2015', 'react', 'stage-2'] 
     })] 
     }, 
     // CSS 
     // "css" loader resolves paths in CSS and adds assets as dependencies. 
     // "style" loader turns CSS into JS modules that inject <style> tags. 
     // In production, we use a plugin to extract that CSS to a file, but 
     // in development "style" loader enables hot editing of CSS. 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'src/style'), 
     loader: 'style-loader!css-loader' 
     }, 
     // "file" loader makes sure those assets get served by WebpackDevServer. 
     // When you `import` an asset, you get its (virtual) filename. 
     // In production, they would get copied to the `build` folder. 
     { 
     test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 
     exclude: /\/favicon.ico$/, 
     loader: 'file-loader', 
     query: { 
      name: '[path][name].[ext]' 
     } 
     }, 
     { 
     test: /\.(ico)(\?.*)?$/, 
     exclude: /node_modules/, 
     loader: 'file-loader', 
     query: { 
      name: '.images/[name].[ext]' 
     } 
     } 
    ] 
    }, 

    // use EnableCircularDependencyPlugin=true|false to check the option 
    plugins: (function() { 
     var plugins = [ 
      new CopyWebpackPlugin([ 
       { from: APP_DIR + '/index.html', to: BUILD_DIR + '/index.html' }, 
       { from: APP_DIR + '/images/', to: BUILD_DIR + '/images/' } 
      ]), 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.NoEmitOnErrorsPlugin(), 
      new webpack.DefinePlugin({ 
       __DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE 
      }) 
     ]; 

     // HERE IS OPTION CONDITION 
     // edit .env file change to EnableCircularDependencyPlugin=false will bypass it 
     if (process.env.EnableCircularDependencyPlugin=="true") { 
      plugins.push(new CircularDependencyPlugin({ 
       // exclude detection of files based on a RegExp 
       exclude: /a\.js|node_modules/, 
       // add errors to webpack instead of warnings 
       failOnError: true 
      })); 
     } 

     return plugins; 
    })(), 
    node: { 
     net: 'empty', 
     dns: 'empty' 
    } 
}; 

module.exports = config; 

Answer 1

file-loader Hinsicht output.publicPath, wie Sie nicht ein festgelegt haben, verwendet er den Pfad relativ zum output.path und das wird nicht funktionieren, wenn eine andere Route. Um es zu beheben setzen nur den öffentlichen Weg zu /:

output: { 
    path: path.join(__dirname, "src"), 
    filename: 'bundle-hot.js', 
    publicPath: '/' 
}, 

file-loader auch eine Option hat publicPath wenn Sie nicht output.publicPath festlegen möchten, wie es auch andere Lader auswirken wird, aber das ist in der Regel, was Sie wollen und wird daher empfohlen. Damit Sie erhalten:

<img src="/images/data/NotFound.png"> 

Sie brauchen auch nicht Ihre images Verzeichnis zu kopieren, da file-loader werden die Bilder kopieren Sie importieren. Tatsächlich verwendet es die URL zu der kopierten Datei. Sie sollten es also aus der CopyWebpackPlugin entfernen, es sei denn, Sie haben Bilder, die nicht von Webpack verarbeitet werden.