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

【问题标题】：Error with webpack using css-loader and text-extract-webpack-plugin使用 css-loader 和 text-extract-webpack-plugin 的 webpack 出错
【发布时间】：2017-01-14 20:30:15
【问题描述】：

我正在使用 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

我做错了什么？

【问题讨论】：

标签： webpack css-loader extract-text-plugin

【解决方案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'
    }
    ]
  }
};

【讨论】：

【解决方案2】：

即使在 Webpack 2.2.0 中“使用”应该替换（并等同于）“加载器”，但情况似乎并非如此。

您似乎还不能对 ExtractTextPlugin 使用“使用”。此外，您似乎无法将数组值用于“loader”（代替“use”）。

如果你替换这段代码：

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

有了这个：

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

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

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

【讨论】：