babel/webpack2/reactでこのファイルタイプを処理するには、適切なローダーが必要な場合があります。

Question

現在、webpack 2をbabelで動作させようとしています。

HERESに私のwebpack.config.js：

'use strict'; 

module.exports = [ 
    { 
    entry: './src/client/app/private.jsx', 
    output: { 
     path: './', 
     filename: './src/client/private/bundle.js' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     rules: [ 
     { 
      use: [ 
      { 
       loader: 'babel-loader', 
       options: { 
       presets: [ 
        ['es2015', { modules: false }], 
        ['es2016', { modules: false }], 
        'react' 
       ], 
       } 
      }, 
      ], 
      exclude: /node_modules/ 
     } 
     ] 
    } 
    } 
]; 

.babelrc：

{ 
    "presets": [ 
    "es2015", 
    "es2016", 
    "react" 
    ], 
    "plugins": [ 
    "transform-react-jsx", 
    "transform-regenerator" 
    ] 
} 

とエラー：

ERROR in ./src/client/app/private.jsx 
Module parse failed: /home/karl/dev/node/project/src/client/app/private.jsx Unexpected token (7:16) 
You may need an appropriate loader to handle this file type. 
| import Index from './containers/Index/index.jsx'; 
| 
| ReactDOM.render(<Index />, document.getElementById('root')); 

Answer 1

私の提案は、このスターターのクローンを作成するために次のようになります。https://github.com/alicoding/react-webpack-babel差異を特定することができます。また、あなたのmodule.exportsで囲んでいる大括弧を取り除くのと同じくらい簡単かどうかは分かりませんが、これまでに見たことはありません。これは通常、あなたがあなたのルールのテストプロパティを省略しているだけで

module.exports = { 
    //... 
} 

Answer 2

の主要な問題になることができますが、検討する必要があり、他にもあるかもしれません

rules: [ 
    { 
    test: /\.jsx$/, 
    use: [ 
     { 
     loader: 'babel-loader', 
     /* 
      your loader options 
     */ 
     }, 
    ], 
    exclude: /node_modules/ 
    } 
] 

：

outputプロパティでは、出力するバンドルにはpathを、バンドル名にはfilenameを使用する必要があります。

output: { 
    path: path.resolve(__dirname, src/client/private), 
    filename: 'bundle.js' 
}, 

また、あなたのresolve.extensionsから空の文字列''を削除する必要があります。 webpack 2ではもう必要ありません。

resolve: { 
    extensions: ['.js', '.jsx'] 
}, 

ターゲットごとに複数の設定をエクスポートする場合は、configオブジェクトの配列を使用できます。そうでない場合は、単一のconfigオブジェクトをエクスポートする必要があります。

module.exports = { 
... 
} 

あなたはここにV2に移行する上でより多くの情報を見つけることができます： Migrating from v1 to v2