誤差的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-裝載機和

回答

相關問題