Сбой в веб-пакете "Ошибка сборки модуля: неизвестное слово" с файлом webpack.config.js - PullRequest
Новая
       13

Сбой в веб-пакете "Ошибка сборки модуля: неизвестное слово" с файлом webpack.config.js

0 голосов
/ 09 мая 2018

webpack у меня не работает при попытке добавить css с помощью css-загрузчика.

ОС: Windows 10 Pro, Webpack: 4.8.0 узел: 8.9.4 нпм: 6.0.0 css-загрузчик: 0.28.11 загрузчик стилей: 0.21.0

package.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');

Сообщение об ошибке 

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 и т. Д., И т. Д., Но, кажется, ничто не указывает на мою проблему. Я буквально следовал дословным инструкциям из раздела модулей веб-пакета, и он все еще не работает. ПОЖАЛУЙСТА, ПОМОГИТЕ!

редактировать: забыл файл конфигурации 

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"
]

...

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Проверяйте эти проблемы, получая похожие проблемы в моем проекте веб-пакета Вы должны проверить правило веб-пакета: 

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

Выше обновлено правило, оно будет обрабатывать наши файлы sass или CSS. Тест - это test: /.(s*)css$/: любой файл, имя которого совпадает с регулярным выражением /.(s*)css$/i.e. .scss или .css

Он должен быть скомпилирован с цепочкой загрузчиков, указанных в массиве использования, т.е. ['style-loader', 'css-loader', 'sass-loader'].

Это правило объединяет вывод sass-loader в css-loader. css-loader примет этот вывод css из sass-loader, а также обработает любые другие файлы .css, которые есть в нашем приложении, и передаст .css в style-loader, который затем выполнит работу по размещению кодов css внутри тегов. в нашем index.html, он работает снизу вверх ..

0 голосов
/ 11 мая 2018

В веб-пакете, когда вы перечисляете несколько загрузчиков в правиле, они оцениваются справа налево (в вашем случае снизу вверх), поэтому ваше правило scss должно быть: 

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

Причина в том, что сначала вы хотите, чтобы ваш sass компилировался в css, а затем css будет встроен в ваш html-файл через style-loader.

Также, если вы не используете sass, вы можете удалить sass-загрузчик.

...