1. 程式人生 > 其它 >webpack打包專案報錯:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

webpack打包專案報錯:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

錯誤截圖:

錯誤原因:根據金山詞霸翻譯如下:

”您可能需要適當的載入程式來處理此檔案型別,當前沒有配置載入器來處理此檔案“ 大致意思是程式在打包過程中會去webpack.config.js檔案中查詢相關css載入器,因為找到所以就報錯了。

解決方法:

1.下載相關外掛 style-loader和css-loader

PS D:\WEB前端\案例\前端工程化:ES6模組化和webpack打包\webpack_study> npm i style-loader css-loader -D
npm WARN webpack[email protected] requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack_study@
1.0.0 No description npm WARN webpack_study@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected] + [email protected] added 18 packages from 51 contributors in 3.847s

2.在webpack.config.js檔案中加入module物件,物件中包含了rules陣列,該陣列內是個物件,專門存放各種載入器,

module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
}

test屬性值是個正則表示式,\. 表示匹配.號,$表示以css結尾,use屬性中存放的就是載入器。

配置完儲存重新執行npm run dev打包檔案

至此問題解決。