2017-07-29 58 views
0

我靠着webpack。然而,这里出现了一个错误,“你可能需要一个合适的加载器来处理这种文件类型。”,我检查了webpack.config.js,这是正确的。如何解决webpack bug:“您可能需要一个合适的加载程序来处理这种文件类型。”当我使用webpack加载css文件

const path = require('path'); 
 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
 
const webpack = require("webpack"); 
 

 
module.exports = { 
 
\t entry: { 
 
\t \t app: './src/main.js', 
 
\t \t print: './src/print.js' 
 
\t }, 
 
\t devtool: 'inline-source-map', 
 
\t devServer: { 
 
\t \t contentBase: 'dist', 
 
\t \t hot: true, 
 
\t }, 
 
\t output: { 
 
\t \t filename: '[name].bundle.js', 
 
\t \t path: path.resolve(__dirname, 'dist') 
 
\t }, 
 
\t module: { 
 
\t \t rules: [{ 
 
\t \t \t test: /\.css$/, 
 
\t \t \t use: [ 
 
\t \t \t \t 'style-loader', 
 
\t \t \t \t 'css-loader' 
 
\t \t \t ] 
 
\t \t }] 
 
\t }, 
 
\t plugins: [ 
 
\t \t new CleanWebpackPlugin(['dist']), 
 
\t \t new HtmlWebpackPlugin({ 
 
\t \t \t title: 'Output Management' 
 
\t \t }), 
 
\t \t new webpack.HotModuleReplacementPlugin() 
 
\t ] 
 
};

此外,这里是我的js文件和css文件:

import './style.css';
body { 
 
\t background-color: blue; 
 
}

和控制台日志中:

./src/style.css 
 
Module parse failed: D:\FrontEndWorkSpace\webpack-demo\src\style.css Unexpected token (1:5) 
 
You may need an appropriate loader to handle this file type. 
 
| body { 
 

 
| \t background-color: blue; 
 

 
| }

另外,我已经安装了风格装载机和CSS加载器,这里是我对我的package.json依赖关系:

"devDependencies": { 
 
    "clean-webpack-plugin": "^0.1.16", 
 
    "css-loader": "^0.28.4", 
 
    "csv-loader": "^2.1.1", 
 
    "file-loader": "^0.11.2", 
 
    "html-webpack-plugin": "^2.29.0", 
 
    "style-loader": "^0.18.2", 
 
    "webpack": "^3.4.1", 
 
    "webpack-dev-server": "^2.6.1", 
 
    "xml-loader": "^1.2.1" 
 
    }

编辑:对于一些未知的原因,它的作品。

+0

您是否安装了css-loader? – aug

+0

是的,我已经安装了css-loader和style-loader – DongShelton

+0

您的webpack配置是否已发布完整配置?提供的文件不会重现错误。如果它不是完整的配置,那么你可能在内部有导致错误的东西,但是你认为包含它并不相关。完全没有发布完整的配置,但请确保减少的配置实际上产生了规定的错误。另请参阅[如何创建最小,完整和**可验证**示例](https://stackoverflow.com/help/mcve)。 –

回答

0

确保您已经安装了您尝试从NPM中使用的装载机。您应该在项目的package.json文件和node_modules文件夹中看到它们。如果你看不出来,你可以安装它们,并将它们保存到您的开发依赖于你的终端:

$ npm install style-loader css-loader --save-dev

最后一位,我发现这个YouTube video series在开始使用的WebPack 2极有帮助。它的前几年发生了很大的变化,所以相关的参考文献很难与过时的文献分开。

好运驯服webpack野兽!

编辑:删除额外的东西。

+0

我已经安装了它们两个。顺便说一句,当我尝试你的方法时,控制台记录一个新的错误:“无效的配置对象.Webpack已经使用一个匹配API模式的配置对象进行初始化。” – DongShelton

相关问题