In standing up this blog, I decided to play around a bit with Webpack. It's more involved than Gulp and Grunt, which are what I'm more familiar with, so I figured it would be simple enough to start using it and get more familiar.
Perhaps due to following the <a href="https://buttercms.com/">ButterCMS</a> tutorial, or perhaps due to the usage of Webpack, I rediscovered a long-solved problem of the server side (of this serverless deployment) not understanding page routing with history mode enabled.
The symptoms were common enough - routes in the blog worked perfectly while navigating through the site, but when refreshing on routed pages, a 404 was shown instead of the expected content. In the olden days, when people used servers, we'd resolve this with an .htaccess or Nginx redirect configuration. In serverless though, it meant I needed to implement a _redirects file and have it be copied to my dist/ folder during npm run build.
A brief Google got me the details on the _redirects file contents
/* /index.html 200
And then I just needed to get it into my dist/ folder during a build, which was also (despite very little and very dated knowledge about Webpack) pretty straightforward. Adding this to the Webpack config
new CopyWebpackPlugin([{from: path.resolve(__dirname, '../public/_redirects'),to: config.build.assetsRoot,ignore: ['.*']}])
Followed by running npm run build to verify that the _redirects file was placed in the appropriate output folder (assetsRoot, in this case) followed by a Netlify redeploy (which of course, is just a push to 'master') and everything works like a charm.
