webpack.config.webpack 파일에서 "webpack build failed: unknown word"가 실패함

webpack.config.webpack 파일에서 "webpack build failed: unknown word"가 실패함

css-pack을 사용하여 css를 추가하려고 하면 webpack이 작동하지 않습니다.

os: Windows 10 Pro, Web Pack: 4.8.0 노드: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 스타일로더: 0.21.0

패키지.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.module

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

에러 메시지

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;
}

명령어를 사용할 뿐입니다.webpack매번 실패하죠이것은 지금까지 가장 짜증나는 도구입니다.내가 이걸 넣었을 때 말고는 아무 것도 효과가 없어!!즉, 요구 사항 설명서 앞에 있습니다. require(!!'./style.css')

npm, stackoverflow 등에 있는 버그 리포트를 모두 읽었지만, 제 문제를 지적하는 것은 아무것도 없는 것 같습니다.webpack의 modules 섹션의 설명을 그대로 따랐는데, 아직 동작하지 않습니다.도와주세요!

편집: 컨피규레이션파일을 잊어버렸다

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;

정답.

순서가 중요한 것으로 나타났습니다.

...

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

...

웹 팩에서는 규칙 내에서 여러 로더를 나열할 때 로더는 오른쪽에서 왼쪽으로(이 경우 아래쪽에서 위쪽) 평가되므로 scs 규칙은 다음과 같습니다.

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

그 이유는 먼저 sass를 css로 컴파일하고 다음으로 스타일 로더를 통해 css가 html 파일에 삽입되기 때문입니다.

또한 sass를 사용하지 않을 경우 sass-loader를 삭제할 수 있습니다.

웹 팩 프로젝트에서 유사한 문제가 발생하는 다음 문제를 확인합니다. 웹 팩 규칙을 확인해야 합니다.

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

위에서 sass 파일 또는 CSS 파일을 처리하는 규칙을 갱신했습니다.테스트는 /. (s*) css$/ : 입니다.이것은 정규 표현 /. (s*) css$/.css 또는 .css와 이름이 일치하는 파일을 의미합니다.

사용 배열에 지정된 로더 체인을 사용하여 컴파일해야 합니다.['style-filename', 'css-filename', 'css-filename']

이 규칙은 sass-loader의 출력을 css-loader에 연결합니다.css-loader는 sass-loader의 이 css 출력을 사용하여 응용 프로그램에 있는 다른 .css 파일을 처리하고 스타일 로더에 .css를 전달합니다.그러면 indexhtml 태그에 css 코드를 넣는 작업이 수행됩니다.

언급URL : https://stackoverflow.com/questions/50261548/webpack-fails-module-build-failed-unknown-word-with-webpack-config-js-file