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”中的“loader”相同），但事实并非如此。

似乎您还没有使用ExtractTextPlugin“使用”。此外，似乎您不能将数组值用于“加载器”（代替“使用”）。

如果你替换这段代码：

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

有了这个：

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

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

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

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

2 个答案: