Webpack Kopieren nicht css in dist

Question

ich folgende CSS-Dateien haben:

<link rel="stylesheet" href="style/select.css"> 
<link rel="stylesheet" href="style/site.css"> 

und die folgende webpack Config

var path = require("path"); 
module.exports = { 
    entry: { 
    app: './src/index.js' 
    }, 

    output: { 
    path: path.resolve(__dirname + '/dist'), 
    filename: '[name].js', 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.(css|scss)$/, 
     use: [ 
      'style-loader', 
      'css-loader', 
     ] 
     }, 
     { 
     test: /\.html$/, 
     exclude: /node_modules/, 
     loader: 'file-loader?name=[name].[ext]', 
     }, 
     { 
     test: /\.elm$/, 
     exclude: [/elm-stuff/, /node_modules/], 
     loader: 'elm-webpack-loader?verbose=true&warn=true', 
      options: {debug: true, warn: true}, 
     }, 
     { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url-loader?limit=10000&mimetype=application/font-woff', 
     }, 
     { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file-loader', 
     }, 
    ], 

    noParse: /\.elm$/, 
    }, 

    devServer: { 
    inline: true, 
    stats: { colors: true } 
    }, 
    resolve: { 
    mainFields: [ 'main'], 
    } 
}; 

wenn ich webpack-dev-Server zu verwenden, scheint der in dem Speicherdateiserver um die richtigen CSS-Dateien zu haben. Allerdings, wenn ich

bauen

Garn nennen es nicht die CSS-Dateien in meinem dist-Ordner kopiert und deshalb nicht die CSS-Dateien zu laden.

Answer 1

Importieren Sie die CSS-Dateien in Ihre Module? Ich denke, Sie müssen die ExtractTextWebpackPlugin verwenden, die die CSS aus dem js-Bundle in eine separate CSS-Datei extrahieren.

Dies funktioniert jedoch nicht mit webpack-dev-server, daher müssen Sie das Plugin in der Konfiguration deaktivieren, die Sie für den dev-Server verwenden. Es gibt eine Option, mit der Sie das tun können:

new ExtractTextPlugin({ 
    filename: '[name].css', 
    disable: true, 
    }),