Webpack schlägt fehl „Modulaufbau fehlgeschlagen: unbekanntes Wort“ mit der Datei webpack.config.js

Webpack funktioniert bei mir nicht, wenn ich versuche, CSS mit dem CSS-Loader hinzuzufügen.

os: Windows 10 pro, webpack: 4.8.0 node: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 style-loader: 0.21.0

Paket.json

  {
      "name": "webpack-dev",
      "version": "1.0.0",
      "description": "",
      "main": "index.php",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "./src/app.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "css-loader": "^0.28.11",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.11",
        "node-sass": "^4.9.0",
        "raw-loader": "^0.5.1",
        "sass-loader": "^7.0.1",
        "style-loader": "^0.21.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.8.1",
        "webpack-cli": "^2.1.3"
      }
    }

app.js

require('./style.css');
require('./scripts.js');

Fehlermeldung

Version: webpack 4.8.1
Time: 2157ms
Built at: 2018-05-09 14:13:17
    Asset      Size  Chunks             Chunk Names
bundle.js  3.68 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/app.js] 48 bytes {main} [built]
[./src/scripts.js] 28 bytes {main} [built]
[./src/style.css] 222 bytes {main} [built] [failed] [1 error]

ERROR in ./src/style.css
Module build failed: Unknown word (2:1)

  1 |
> 2 | var content = require("!!./style.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |

 @ ./src/app.js 1:0-22

style.css

body {
  color: red;
}

Ich benutze nur den Befehl webpack und es schlägt jedes Mal fehl. Dies ist das frustrierendste Tool aller Zeiten. Nichts funktioniert, außer wenn ich setze !! vor der require-Anweisung, dh require(!!'./style.css')

Ich habe jeden Fehlerbericht darüber gelesen, den ich auf npm, stackoverflow usw. finden kann, usw., aber nichts scheint auf mein Problem hinzuweisen. Ich habe die Anweisungen wörtlich aus dem Modulbereich des Webpacks befolgt und es funktioniert immer noch nicht. BITTE HELFEN SIE!

edit: Konfigurationsdatei vergessen

const webpack = require('webpack')
const path = require('path')

const config = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          'sass-loader',
          'css-loader',
          'style-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};
module.exports = config;

Antworten

Es stellt sich heraus, dass die Reihenfolge wichtig ist

...

use: [
    "style-loader",
    "css-loader",
    "sass-loader"
]

...

Wenn Sie in Webpack mehrere Loader innerhalb einer Regel auflisten, werden sie von rechts nach links ausgewertet (in Ihrem Fall von unten nach oben), daher sollte Ihre scss-Regel wie folgt lauten:

  {
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

Der Grund dafür ist, dass Sie zuerst möchten, dass Ihr Sass zu CSS kompiliert wird, und dann wird das CSS über den Style-Loader in Ihre HTML-Datei eingebunden.

Wenn Sie sass nicht verwenden, können Sie auch den sass-loader entfernen.

Überprüfen Sie diese Probleme und erhalten Sie ähnliche Probleme in meinem Web-Pack-Projekt. Sie müssen die Web-Pack-Regel überprüfen:

{
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

Oben wurde die Regel aktualisiert, mit der unsere Sass- oder CSS-Dateien verarbeitet werden. Der Test ist test: /.(s*)css$/ : Dies bedeutet, dass jede Datei einen Namen hat, der mit dem regulären Ausdruck /.(s*)css$/dh .scss oder .css übereinstimmt

Es sollte mit der Kette von Ladeprogrammen kompiliert werden, die im use-Array angegeben sind, dh [‘style-loader’, ‘css-loader’, ‘sass-loader’].

Diese Regel verkettet die Ausgabe von sass-loader mit css-loader. css-loader nimmt diese CSS-Ausgabe von sass-loader und verarbeitet auch alle anderen .css-Dateien, die wir in unserer Anwendung haben, und leitet die .css an style-loader weiter, der dann die Aufgabe übernimmt, die CSS-Codes in Tags einzufügen In unserer index.html funktioniert es von unten nach oben.