node app with preact build, using the webpack bundler, and babel compiler

.babelrc

{
	"presets": ["@babel/preset-env"],
	"plugins":[
		["@babel/transform-react-jsx", {"pragma" : "h"}]
	]
}

_build_preact-babel-webpack.md

start

• npm init
• sometimes a weird error is thrown (cannot find /.options), easy fix is to delete node_modules directory and run npm install

webpack.config.js:

• contents for webpack.config.js (see additional file)
• root for webpack.config.js mkdir src touch src/index.js, output: mkdir public touch public/index.html
• index.html should have basic html/css + div (id root) to mount app to, and script src=/app.js

package.json

• install dependencies npm i preact preact-router slugify webpack
• install devDependencies npm i -D @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-env babel-loader webpack-cli webpack-dev-server

scripts

"scripts":{
  "start": "webpack-dev-server --content-base public --port 4444",
  "build": "webpack"
}

• npm start and npm build to compile

recommended build

• index.js
• directories for services, containers, and components
  • services contains get request for any API
  • containers contains components that contain subcomponents and state of the app, recommended to map containers to routes
  • components components that don't have a state (contains parts of interface (ex: Header.js, Post.js, List.js, Application.js (Applications.js handles routing w/ preact-router module)))
• for build reference, using Preact.js, and this outdated tutorial

webpack.config.js

var path = require('path');

module.exports = {
	mode: 'production',
	entry: path.join(__dirname, 'src', 'index.js'),
	output: {
		path: path.join(__dirname, 'public'),
		filename: 'app.js'
	},
	module: {
		// configuration regarding modules
		rules: [
		// rules for modules (configure loaders, parser options, etc.)
			{
				test: /\.js$/, 
				exclude: (/node_modules/),
				use: [
					{
						loader: 'babel-loader',
						options: {
							presets: ['@babel/preset-env'] 
						}
					}
				]
			}
		]
	},
	resolve: {
		// options for resolving module requests
    // (does not apply to resolving to loaders)
		modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
		extensions: ['.js', '.json'],
		alias: {
			Root: path.resolve(__dirname, './src')
		}
	},
	devServer: {
		historyApiFallback: {
			index: 'index.html'
		}
	}
};

//for a proper build into the public directory use `npx webpack`