Laden css url() Dateien in einem bestimmten Ordner mit webpack

Question

Ich habe ein Modul, das eine CSS-Datei hat, bin ich die CSS-Datei wie folgt geladen:

import "photoswipe/dist/default-skin/default-skin.css" 

inside "default-skin.css" ein Bild wird wie folgt geladen:

background-image: url("image.png"); 

Wenn ich die Seite, die Datei „image.png“ ausgeführt wird, bei http://localhost:9000/ (die Wurzel des Projekts) angefordert werden

Wenn ich die image.png kopieren vom Modulpfad zur Wurzel von t er Projekt, alles funktioniert, aber ist schmutzig, um Bilder über die Wurzel des Projekts zu haben.

Ich möchte in der Lage sein, einen Pfad anzugeben, um nach dem Bild zu suchen, wie [root des Projekts]/img, so dass ich das Bild innerhalb des IMG-Ordners und nicht im Stamm haben kann.

Ich möchte nicht den URL() Pfad in der CSS-Datei ändern. Ich kann diese CSS-Datei nicht berühren.

Ich muss wahrscheinlich etwas in meiner Webpack-Konfiguration ändern, aber ich weiß nicht, was webpack sagt, nach Bilddateien im Stammverzeichnis des Projekts zu suchen.

Eine andere Lösung könnte ein Webpack-Plugin sein, das beim Erstellen die Datei aus dem Modulordner in meinen IMG-Ordner kopiert und dort beim Ausführen der Site angefordert wird. Ich weiß nicht, ob eine solche Funktion oder ein solches Plugin existiert.

Das ist meine webpack Konfigurationsdatei:

var webpack    = require('webpack'); 
var WebpackNotifierPlugin = require('webpack-notifier'); 

"use strict"; 
module.exports = { 
    entry: "./source/typescript/Main.ts", 
    output: { 
     filename: "./js/bundle.js" 
    }, 
    devtool: "inline-source-map", 
    devServer: { 
     contentBase: ".", 
     host: "localhost", 
     port: 9000, 
     open: true 
    }, 
    module: { 
     rules: [ 
      { 
       test:/\.(s*)css$/, 
       use: [ 
        { 
         loader: "style-loader" 
        }, 
        { 
         loader: "css-loader", 
         options: { 
          url: false 
         } 
        }, 
        { 
         loader: "sass-loader" 
        } 
       ] 
      }, 
      { 
       test: /\.tsx?$/, 
       use: 'ts-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       enforce: 'pre', 
       test: /\.js$/, 
       loader: "source-map-loader" 
      }, 
      { 
       test: /\.(png|jpg|gif|svg|eot|ttf|otf|woff|woff2|json|xml|ico)$/, 
       use: [{loader: 'file-loader'}] 
      }, 
      { 
       test: /\.(csv|tsv)$/, 
       use: [{ loader: 'csv-loader' }] 
      }, 
      { 
       test: /\.exec\.js$/, 
       use: [{ loader: 'script-loader' }] 
      }, 
      { 
       test: require.resolve('jquery'), 
       use: 
       [ 
        { 
         loader: 'expose-loader', 
         options: 'jQuery' 
        }, 
        { 
         loader: 'expose-loader', 
         options: '$' 
        } 
       ] 
      } 

     ] 
    }, 
    resolve: { 
     extensions: [ '.tsx', '.ts', '.js' ] 
    }, 
    plugins: [ 
     new WebpackNotifierPlugin({excludeWarnings: true}), 
     //new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) // Uncoment to minify bundle 
    ] 
}; 

Answer 1

Ich löste das Problem:

1) entfernt url: false in den CSS-loader, so dass nun die Pfade von CSS-loader verwaltet werden. (Das Standardverhalten). Ich habe diese Option ursprünglich eingestellt, weil ich nicht verstanden habe, wie css-loader URLs auflöst, also habe ich diese Funktion deaktiviert, weil sie einige Fehler verursacht hat. Jetzt habe ich festgestellt, dass css url() Pfade relativ zum root des Projekts sind, beginnend mit /, zum Beispiel: url ("/ img/my-image.png");

2) Wenn url: false entfernt wird, kopiert webpack automatisch alle in den verwendeten Modulen gefundenen Bilddateien mit einem zufälligen Dateinamen in den Stammordner des Projekts (dies ist das Standardverhalten). Jetzt musste ich Webpack konfigurieren, um dies auf eine saubere Art zu tun, mit Ordnern und ohne zufällige Dateinamen. Ich habe die Webpack-Konfigurationsdatei geändert, um Webpack mitzuteilen, dass diese Bilder in meinen IMG-Ordner mit ihrem ursprünglichen Namen kopiert werden sollen. Dies geschieht in den Optionen des Datei-Loaders.

Jetzt funktioniert alles, meine letzte webpack Konfigurationsdatei ist dies:

var webpack    = require('webpack'); 
var WebpackNotifierPlugin = require('webpack-notifier'); 

"use strict"; 
module.exports = { 
    entry: "./source/typescript/Main.ts", 
    output: { 
     filename: "./js/bundle.js" 
    }, 
    devtool: "inline-source-map", 
    devServer: { 
     contentBase: ".", 
     host: "localhost", 
     port: 9000, 
     open: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(png|jpg|gif|svg|ico)$/, 
       loader: 'file-loader', 
       query:{ 
        outputPath: './img/', 
        name: '[name].[ext]?[hash]' 
       } 
      }, 
      { 
       test: /\.(eot|ttf|otf|woff|woff2|json|xml)$/, 
       loader: 'file-loader', 
       query:{ 
        outputPath: './fonts/', 
        name: '[name].[ext]?[hash]' 
       } 
      }, 
      { 
       test: /\.(json|xml)$/, 
       loader: 'file-loader', 
       query:{ 
        outputPath: './data/', 
        name: '[name].[ext]?[hash]' 
       } 
      }, 
      { 
       test: /\.(s*)css$/, 
       use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] 
      }, 
      { 
       test: /\.tsx?$/, 
       use: 'ts-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       enforce: 'pre', 
       test: /\.js$/, 
       loader: "source-map-loader" 
      }, 
      { 
       test: /\.(csv|tsv)$/, 
       use: [{ loader: 'csv-loader' }] 
      }, 
      { 
       test: /\.exec\.js$/, 
       use: [{ loader: 'script-loader' }] 
      },/*, 
      { 
       // This exposes jQuery for use outside the modules and bundle by other vendor libraries 
       // by setting $ and jQuery global variables. Uncomment if jQuery and vendor libraries are 
       // going to be used. 
       test: require.resolve('jquery'), 
       use: 
       [ 
        { 
         loader: 'expose-loader', 
         options: 'jQuery' 
        }, 
        { 
         loader: 'expose-loader', 
         options: '$' 
        } 
       ] 
      } 
      */    
     ] 
    }, 
    resolve: { 
     extensions: [ '.tsx', '.ts', '.js' ] 
    }, 
    plugins: [ 
     new WebpackNotifierPlugin({excludeWarnings: true}), 
     //new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) // Uncoment to minify bundle 
    ] 
};