create-application-template 0.3.0

package/webpack/webpack.config.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge')
+const commonConfig = require('./webpack.common.js')
+
+require('dotenv-flow').config()
+
+module.exports = (webpackEnv) => {
+  const { BUNDLER_ENV } = webpackEnv
+
+  const envConfig = require(`./webpack.${BUNDLER_ENV}.js`)
+
+  const config = merge(commonConfig(webpackEnv), envConfig(webpackEnv))
+
+  return config
+}

package/webpack/webpack.dev.js

@@ -0,0 +1,40 @@
+const webpack = require('webpack')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const packageJson = require('../package.json')
+
+module.exports = () => {
+  const { PORT } = process.env
+
+  return {
+    mode: 'development',  // NODE_ENV
+    devtool: 'cheap-module-source-map',
+    devServer: {
+      // static: {
+      //   directory: paths.build,
+      // },
+      hot: true,
+      open: true,
+      port: PORT || 3333,
+      proxy: [
+        {
+          context: ['/'],
+          target: packageJson.proxy,
+        },
+      ],
+      historyApiFallback: true,
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env.EXAMPLE': JSON.stringify('devconfig'),
+      }),
+      // NOTE per the docs added "react-refresh/babel" (r-r/b) to
+      // .babelrc and babel-loader, but seems to work without r-r/b...
+      // docs also used to say use webpack.HotModuleRepalcementPlugin,
+      // which also seemed to be unneeded, and now they don't...
+      // so be on the lookout for doc changes related to r-r/b too
+      new ReactRefreshWebpackPlugin(),
+      new CaseSensitivePathsPlugin(),
+    ],
+  }
+}

package/webpack/webpack.prod.js

@@ -0,0 +1,34 @@
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const getPaths = require('./utilities/getPaths')
+const getTerserOptions = require('./utilities/getTerserOptions')
+
+module.exports = (webpackEnv) => {
+  const { BUNDLER_ENV, BUNDLER_WITH_PROFILING } = webpackEnv
+
+  const paths = getPaths({ BUNDLER_ENV })
+  const terserOptions = getTerserOptions({ BUNDLER_WITH_PROFILING })
+
+  return {
+    mode: 'production',  // NODE_ENV
+    devtool: 'source-map',
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({ terserOptions }),
+        new CssMinimizerPlugin(),
+      ],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env.EXAMPLE': JSON.stringify('prodconfig'),
+      }),
+      new MiniCssExtractPlugin({
+        filename: paths.static.css.filenameCss,
+        chunkFilename: paths.static.css.chunkFilenameCss,
+      }),
+    ],
+  }
+}