Webpack錯誤：「您可能需要適當的加載程序來處理此文件類型」

我收到以下錯誤「您可能需要適當的加載程序來處理此文件類型」，同時使用Webpack編譯ES6和JSX文件。Webpack錯誤：「您可能需要適當的加載程序來處理此文件類型」

終端ERROR：

You may need an appropriate loader to handle this file type. 
| import React from 'react'; 
| import ReactDOM from 'react-dom';

webpack.config.js看起來是這樣的，

module.exports = { 
    entry: './main.js', 
    output: { 
     path: './', 
     filename: 'index.js' 
    }, 
    devServer: { 
     inline: true, 
     port: 2525 
    }, 
    module: { 
     loaders: [ 
      { 
       test: '/\.js$/', 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
       query: { 
        presets: ['es2015','react'] 
       } 
      } 
     ] 
    } 
}

main.js文件包含，

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends React.Component { 
    render(){ 
     return <h1>Title text</h1> 
    } 
} 
ReactDOM.render(<App/>,document.getElementById('app'));

PAC kage.json看起來是這樣的，

{ 
    "name": "react-webpack-es6", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

讓我知道如果我在這裏失去了一些東西。

來源

2016-03-28 Aleem S

試**測試：/\.jsx$/**而不是**測試：/\.js $/**裏面的加載程序數組的webpack配置 –

@KishoreBarik如下所述，這是由於**測試**，它不應該包裹在引號內。感謝您的及時響應:) –

哦，是的，這是引號，但我從我的配置複製正確的文本，我沒有注意到引號：P :) –

在webpack.config.js中，module.loaders中的test屬性應該是正則表達式，而不是字符串。

module: { 
    loaders: [{ 
    test: '/\.js$/',

改變這個'/\.js$/'這個/\.js$/

module: { 
    loaders: [{ 
    test: /\.js$/,

瞭解更多在webpack/module-loaders

來源

2016-03-28 13:58:50 Hadrian

@WitVault詢問在上一個答案的評論熱重新加載。以下是我的看法：使用Redux和Webpack熱模塊替換。在重新加載過程中保留React組件的狀態很困難。瞭解更多在[熱Reload在反應]（https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.kkr25hogs）。該解決方案最終將保持在不會重新加載的地方（Redux商店或本地存儲）。 – Hadrian

感謝上帝，我發現了這一點。我會花30分鐘沒有理由調試這樣愚蠢的東西。 – CapturedTree

Webpack錯誤：「您可能需要適當的加載程序來處理此文件類型」

回答

相關問題