如何解決webpack bug：「您可能需要一個合適的加載程序來處理這種文件類型。」當我使用webpack加載css文件

我靠着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" 
 
    }

編輯：對於一些未知的原因，它的作品。

來源

2017-07-29 DongShelton

您是否安裝了css-loader？ – aug

是的，我已經安裝了css-loader和style-loader – DongShelton

您的webpack配置是否已發佈完整配置？提供的文件不會重現錯誤。如果它不是完整的配置，那麼你可能在內部有導致錯誤的東西，但是你認爲包含它並不相關。完全沒有發佈完整的配置，但請確保減少的配置實際上產生了規定的錯誤。另請參閱[如何創建最小，完整和**可驗證**示例]（https://stackoverflow.com/help/mcve）。 –

確保您已經安裝了您嘗試從NPM中使用的裝載機。您應該在項目的package.json文件和node_modules文件夾中看到它們。如果你看不出來，你可以安裝它們，並將它們保存到您的開發依賴於你的終端：

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

最後一位，我發現這個YouTube video series在開始使用的WebPack 2極有幫助。它的前幾年發生了很大的變化，所以相關的參考文獻很難與過時的文獻分開。

好運馴服webpack野獸！

編輯：刪除額外的東西。

來源

2017-07-29 03:57:03 davemacdo

我已經安裝了它們兩個。順便說一句，當我嘗試你的方法時，控制檯記錄一個新的錯誤：「無效的配置對象.Webpack已經使用一個匹配API模式的配置對象進行初始化。」 – DongShelton

如何解決webpack bug：「您可能需要一個合適的加載程序來處理這種文件類型。」當我使用webpack加載css文件

回答

相關問題