Novice at React and Webpack

Question

I'm pretty new to using React with webpack; is this a reasonable config file? What would you add or subtract?

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;

Also, I'm not entirely sure what dependencies are needed to make this work. There are a few different babel dependencies that have been preloaded into my project folder, but I only see a couple being referenced here (namely, the babel-loader and es2015/react presets).

In my package.json I have

  "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"
  },

wnamen wnamen · Accepted Answer · 2017-09-20T18:53:57

What you use in your webpack and package.json files is dependent on the needs of your app. For example, if your app handles a lot of images you might want to consider adding a loader that could handle images, such as url-loader. If you want it to handle more dynamic css classes, you might want to add the classNames npm module. So what you have right now works... but it's hard to say what to add without knowing what you're building.

In my personal opinion, I suggest you use create-react-app since you are still new. This way you don't have to deal with configuring your webpack and can focus on the fundamentals of react.

Novice at React and Webpack

1 Answers