Webpack 2: css-Eintrag von Ergebnis ausschließen

Question

Ich möchte scss und js mit Webpack kompilieren. Solange ich es jedoch mit Symfony 3 verwende, wo nur einige Seiten des Frontends JavaScript-Komponenten verwenden, möchte ich CSS zu einer eigenständigen Datei kompilieren und das altmodische <link href="style.css"> verwenden, anstatt CSS in JavaScript-Module zu importieren.

Ich schaffte es mit den folgenden webpack.config.js, die ich js/script.js und css/style.css produzieren sollte. Es funktioniert, aber es produziert auch js/style.js, die ich nicht brauche und will. Ich nehme an, das Problem ist, dass der Eintrag "style" auch Ausgabe JS produziert, sogar durch es wird von ExtractTextPlugin verarbeitet, aber wie man Webpack nicht sagen, um eine Javascript-Ausgabe für einen Eintrag zu produzieren?

Ich habe auch versucht, nicht mehrere Einstiegspunkte zu verwenden und main.scss zu einer Einstiegspunktliste mit index.js hinzuzufügen. Die extra Datei wurde natürlich nicht erzeugt, aber die transpilierte script.js enthielt Verweise auf main.scss, die ich nicht haben wollte. Ich möchte eine reine Lösung, die Styles vollständig von Scripts unterscheidet.

const path = require('path'); 
const outputPath = path.join(__dirname, '..', 'www'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = { 
    devtool: 'source-map', 
    entry: { 
     script: ['./src/js/index.js'], 
     style: ['./src/scss/main.scss'] 
    }, 
    target: 'web', 
    output: { 
     filename: 'js/[name].js', 
     path: outputPath 
    }, 
    resolve: { 
     extensions: ['.js'] 
    }, 
    module: { 
     rules: [ 
      { // sass/scss loader for webpack 
       test: /\.(sass|scss)$/, 
       loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ // define where to save the file 
      filename: 'css/[name].css', 
      allChunks: true, 
     }) 
    ] 
}; 

Answer 1

Webpack scheint benötigen immer eine Quellcodedatei in externen Stile zu bringen, entweder CSS oder Sass - Ich glaube nicht, es trotzdem zu umgehen, dass ist. Wenn Sie nur möchten, dass diese kompilierten CSS-Dateien in Ihre App importiert werden und keine verknüpfte JS-Datei haben möchten, verwenden Sie einfach den Compiler node-sass und erstellen Sie eine CSS-Datei. Dann benutzen Sie entweder den webpack css loader, um diesen über webpack in Ihre App zu bringen, oder Sie können ihn manuell in Ihrer html-Datei referenzieren.

Ansonsten haben Sie einfach eine js-Datei mit einem einzigen Import der Sass-Stile dann löschen Sie es nach dem Build. Sie werden das gleiche CSS bekommen, egal wie.