ReactとWebpackの初心者

Question

私はReact with webpackを使い慣れています。これは合理的な設定ファイルですか？あなたは何を加えたり引いたりしますか？

const path = require('path'); 

const webpackConfig = { 
    entry: path.resolve(__dirname, 'ENTRY'), 
    output: { 
    path: path.resolve(__dirname, 'STATIC'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [], 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
    devtool: 'inline-source-map', 
}; 

webpackConfig.module.loaders.push({ 
    test: /\.js[x]?$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    options: { presets: ['es2015', 'react']}, 
}); 

webpackConfig.module.loaders.push({ 
    test: /\.(scss|css)$/, 
    loaders: ['style-loader', 'css-loader', 'sass-loader'], 
}); 

module.exports = webpackConfig; 

また、私はこの作業を行うためにどのような依存関係が必要であるかについて完全にはわかりません。私のプロジェクトフォルダにプリロードされたいくつかの異なるbabel依存関係がありますが、私はここで参照されているカップル（つまり、babel-loaderとes2015/reactプリセット）のみを参照してください。私はあなたがあなたのWebPACKとpackage.jsonファイルで使用すると、あなたのアプリケーションのニーズに依存している

"devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-latest": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^3.6.0" 
    }, 

Answer 1

を持っている私のpackage.jsonで

。たとえば、アプリが大量の画像を扱う場合、画像を扱うことができるローダ（URLローダなど）を追加することを検討してください。よりダイナミックなCSSクラスを処理したい場合は、classNames npmモジュールを追加するとよいでしょう。あなたが今働いているものは...しかし、あなたが何を構築しているのかを知らずに何を追加するのかは難しいです。

あなたがまだ新しいので、私はあなたがcreate-react-appを使用することを提案します。この方法では、Webpackの設定に対処する必要はなく、反応の基本に焦点を当てることができます。