This build pipeline is not exactly what you would call "production ready" but it does give a solid start for you to add on to it the things that you need in order to get the development experience you're looking for. The approach that some people take (including myself at times) is to take a fully built up pipeline of Yeoman.io or somewhere else and then strip off the things they don't want until it suits there style. There's nothing wrong with this but perhaps with the example above you could opt for the opposite approach and build up from bare bones.
Some things you might like to add are things like a testing framework and coverage statistics like Karma with Mocha or Jasmine. Linting with ESLint. Hot module replacement in webpack-dev-server so that you can get that Ctrl+S, F5 development experience. Also the current pipeline only builds in dev mode so a production build task would be good.
Notice in the context property of the
webpack.config.js we have used the node path module to define our path rather than just concatenating
__dirname to the string
/src this is because windows hates forward slashses. So to make the solution more cross platform compatible use leverage node to help us.
Explanation of webpack.config.js properties
This is the filepath for which webpack will use as it's root path for the purposes of resolving relative file paths. So in index.jsx where we use
require('./index.html') that dot actually resolves to the
src/ directory because we've defined it as such in this property.
Where webpack looks first to begin bundling the solution. This is why you'll see that in the index.jsx we are stitching together the solution with requires and imports.
These are settings specific to webpack-dev-server. The
contentBase defines where the server should make it's root, we've defined the
dist/ folder as our base here. The
port is the port that the server will be hosted on.
open is what is used to instruct webpack-dev-server to open your default browser for you once it's spun up the server.
module > loaders
This defines a mapping for webpack to use so that is knows what to do when it finds different files. The
test property gives regex for webpack to use to determine if it should apply this module, in most cases we've matches on file extensions.
loaders give the name of the loader module that we'd like to use to load the file into webpack and let that loader take care of the bundling of that file type. There is also a