使用 css-loader 和 text-extract-webpack-plugin 的 webpack 出错

Question

我正在使用webpack@2.2.0-rc.3和extract-text-webpack-plugin@2.0.0-beta.4，我有以下webpack配置：

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

这是一个非常简单的设置，但是在运行 webpack 时出现此错误：

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

我做错了什么？

Answer 1

您没有加载 css 文件，这就是您收到错误的原因。尝试将规则替换为您的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'
    }
    ]
  }
};

Answer 2

尽管 Webpack 2.2.0 中的"use"应该取代（并且与 "loader" 相同），但情况似乎并非如此。

您似乎还不能在ExtractTextPlugin中使用"use"。此外，您似乎不能为"加载器"使用数组值（代替"use"）。

如果替换这段代码：

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

有了这个：

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

..它应该有效。（该替换适用于我类似的损坏测试用例。

看起来主要相关问题是 https://github.com/webpack/extract-text-webpack-plugin/issues/265