webpack: mehrere Eingänge mit mehreren Dateitypen

Question

Ich konnte "es6 standard" js Dateien in native js mit einem Einstiegspunkt kompilieren, ich konnte auch mehrere Einträge verwenden, um mehrere Dateien zu kompilieren. Beispiel:

webpack.config.js

module.exports = { 
    entry: { 
     front: "./static/src/js/Front.js", 
     account: "./static/src/js/Account.js" 
    }, 
    output: { 
     path: "./static/dist", 
     filename: "[name]-bundle.js" 
    } 
}; 

ich das Konzept der Verwendung von Modulen/Plugins verstanden haben, andere Dateien zu kompilieren, mit ein wenig mehr ...

modules: { 
    loaders: [ 
     { tests: '/\.(css|scss)$/', loader: 'css-loader|style-loader'} 
    ] 
} 

Diese Lösungen kompilieren meine Dateien nur in JavaScript, einschließlich meiner styles (scss, sass, css).

Ich bin auf der Suche nach einer Lösung, wo ich zwei (oder mehrere) verschiedene Eintragsdateien haben, die jeweils eine eigene Ausgabedatei mit einem eigenen Dateityp (nicht nur .js) produzieren wird. Ich hätte nichts dagegen, mehrere Config-Module zu haben. Danke ...

Answer 1

Da Ihr Code in SCSS ist, benötigen Sie den SCSS-Loader und CSS-Loader, Sie benötigen auch extract-text-webpack-plugin, das bringt jeden Text, den Sie im Bundle haben, in eine separate Datei.

Auch weil ich weiß, dass Sie die Bild- und Schriftdateien aus dem Bundle verschieben möchten, ging ich weiter, um Test für das Extrahieren der Bilder/Schriftarten hinzuzufügen, für die Sie file-loader installieren müssen. Ich hoffe, dass

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractText = require('extract-text-webpack-plugin'); 

const extractCss= new ExtractText({ filename: 'styles/vendors.css' }); 
const extractSass = new ExtractText({ filename: 'styles/site.css' }); 

module.exports = (env) => { 
    return { 
    entry: { 
     main: path.resolve(__dirname, '../', 'src', 'Front.js'), 
    }, 
    output: { 
     path: path.resolve(__dirname, '../', 'dist'), 
     filename: 'js/[name]-bundle.js', 
    }, 
    module: { 
     rules: [ 
     { test: /\.css/, use: extractCss.extract(['css-loader']) }, 
     { test: /\.scss/, exclude: /node_modules/, use: extractSass.extract(['css-loader', 'sass-loader']) }, 

     { test: /\.(png|jpg)$/, exclude: /node_modules/, use: 'file-loader?outputPath=images/&publicPath=../'}, 
     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=../'}, 
     ] 
    }, 
    resolve: { 
     modules: ['node_modules'], 
    }, 
    plugins: [ 
     extractCss, 
     extractSass, 
    ] 
    } 
} 

PS: I am in a hurry out, so I just cooked this up fast, when I come back I will review, in case you find any bugs, just comment below.