Ошибка с webpack с использованием css-loader и text-extract-webpack-plugin

Я использую [email protected] и [email protected], и у меня есть следующая конфигурация веб-пакета:

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    app: './source/app.js',
    vendor: './source/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, './.tmp/dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [{
      test: /\.css/,
      use:[ ExtractTextPlugin.extract({
        loader: ["css-loader"],
      })],
    }],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "[name].[chunkhash].css",
      allChunks: true,
    })
  ]
};

В файле vendor.js у меня есть этот код:

require("./asdf.css")

А в коде asdf.css у меня просто есть

body {
    background: yellow;
}

Это довольно простая настройка, но я получаю эту ошибку при запуске веб-пакета:

ERROR in ./source/asdf.css
Module build failed: ModuleParseError: Module parse failed: /home/vagrant/dorellang.github.io/source/asdf.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|     background: yellow;
| }
    at /home/vagrant/dorellang.github.io/node_modules/webpack/lib/NormalModule.js:210:34
    at /home/vagrant/dorellang.github.io/node_modules/webpack/lib/NormalModule.js:164:10
    at /home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at Array.<anonymous> (/home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:197:4)
    at Storage.finished (/home/vagrant/dorellang.github.io/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:15)
    at /home/vagrant/dorellang.github.io/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:69:9
    at /home/vagrant/dorellang.github.io/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./source/vendor.js 2:0-21

Что я делаю не так?


webpack css-loader extract-text-plugin
person dorellang    schedule 14.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы не загружаете файл css, поэтому вы получаете ошибку. Попробуйте заменить правила this в вашем webpack.congif.js следующим образом:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  ...  ...  ...
  module: {
    loaders: [
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'ur path here')
    },
    { 
      test: /\.css$/, 
      include: path.join(__dirname, 'ur path here'),
      loader: 'style-loader!css-loader'
    }
    ]
  }
};
person Razvan Alex    schedule 14.01.2017

arrow_upward
0
arrow_downward

Несмотря на то, что «использование» должно заменить (и быть идентичным) «загрузчику» в Webpack 2.2.0, это не так.

Не похоже, что вы можете использовать «использовать» с ExtractTextPlugin. Кроме того, не похоже, что вы можете использовать значение массива для «загрузчика» (вместо «использовать»).

Если вы замените этот бит кода:

use:[ ExtractTextPlugin.extract({
    loader: ["css-loader"],
})],

С этим:

loader: ExtractTextPlugin.extract({
    loader: ["css-loader"],
}),

..он должен работать. (Эта замена сработала для моего аналогичного сломанного тестового примера.)

Похоже, что основная проблема связана с https://github.com/webpack/extract-text-webpack-plugin/issues/265

person Samuel Scheiderich    schedule 19.01.2017