2

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

我究竟做错了什么？

4

2 回答 2

0

尽管在 Webpack 2.2.0 中“use”应该替换（并且等同于）“loader”，但情况似乎并非如此。

看来您还不能将“使用”与 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

于 2017-01-19T20:38:24.503 回答
0

您没有加载 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'
    }
    ]
  }
};
于 2017-01-14T20:34:19.413 回答