Webpack 使用css加载程序和文本提取网页包插件的网页包出错

我正在使用

webpack@2.2.0-rc.3

和

提取文本网页-plugin@2.0.0-beta.4

我有以下网页配置：

var path=require（'path'）；
var ExtractTextPlugin=require（“提取文本网页包插件”）；
module.exports={
条目：{
app:“./source/app.js”，
供应商：'./source/vendor.js'
},
输出：{
path:path.resolve（_dirname，'./.tmp/dist'），
文件名：'[name].[chunkhash].js'
},
模块：{
规则：[{
测试：/\.css/,，
用法：[ExtractTextPlugin.extract({
加载器：[“css加载器”]，
})],
}],
},
插件：[
新的ExtractTextPlugin({
文件名：“[name].[chunkhash].css”，
allChunks：是的，
})
]
};

在

vendor.js

文件中，我有以下代码：

require（“./asdf.css”）

在

asdf.css

代码中，我只需要

正文{
背景：黄色；
}

这是一个非常简单的设置，但我在运行webpack时遇到以下错误：

./source/asdf.css中的

错误
模块构建失败：ModuleParseError:模块解析失败：/home/vagrant/dorellang.github.io/source/asdf.css意外令牌（1:5）
您可能需要适当的加载程序来处理此文件类型。
|身体{
|背景：黄色；
| }
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
在迭代器上（/home/vagrant/dorellang.github.io/node_modules/loader runner/lib/LoaderRunner.js:206:10）
在阵列上。（/home/vagrant/dorellang.github.io/node_modules/loader runner/lib/LoaderRunner.js:197:4）
在Storage.finished（/home/vagrant/dorelang.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/manentable fs/manentable fs.js:78:16
在FSReqWrap.readFileAfterClose[完成时]（fs.js:445:3）
@./source/vendor.js 2:0-21

---

我做错了什么？

您没有加载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'
    }
    ]
  }
};

尽管Webpack2.2.0中的“use”应该替换（并且与“loader”相同），但情况似乎并非如此

你似乎还不能在ExtractTextPlugin中使用“use”。此外，似乎不能将数组值用于“loader”（代替“use”）

如果替换此代码位：

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

为此：

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

…应该行得通。（那个替代品对我类似的坏掉的测试用例有效。）

看起来主要的相关问题是