误差的WebPack使用CSS-装载机和

我使用[email protected]和[email protected]文本提取物的WebPack-插件，我有以下的WebPack配置：误差的WebPack使用CSS-装载机和

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

我在做什么错？

来源

2017-01-14 dorellang

你没有加载的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-14 20:34:19

即使“使用”应该替换（并是相同的）在的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

来源

2017-01-19 20:38:24

误差的WebPack使用CSS-装载机和

回答

相关问题