Enhancing build script and adding a few others

package.json

@@ -4,10 +4,13 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "npm run dev:lib & npm run dev:server",
-    "dev:lib": "webpack --config packing/webpack.config.js --watch --progress --hide-modules",
+    "prestart": "npm run lint",
+    "start": "echo 'STARTING' && npm run dev:lib && npm run dev:server",
+    "dev:webpack": "webpack --config packing/webpack.config.js --progress --hide-modules",
     "dev:server": "node packing/server.js",
-    "build": "webpack --config webpack.prod.js"
+    "lint": "echo 'LINTING' && eslint --ext .js src packing && echo 'Syntax is ok...'",
+    "prebuild": "npm run lint",
+    "build": "echo 'BUILDING' && webpack --config packing/webpack.prod.js"
   },
   "author": "",
   "license": "ISC",

packing/webpack.config.js

@@ -6,6 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
 	mode: 'development',
 	devtool: 'source-map',
+	watch: false,
 	entry: {
 		app: './src/editor.js',
 	},

packing/webpack.prod.js

@@ -1,26 +1,81 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
 	mode: 'production',
-	entry: './src/editor.js',
+	watch: false,
+	entry: {
+		app: './src/editor.js',
+	},
+	resolve: {
+		symlinks: false,
+	},
 	output: {
 		filename: 'site.min.js',
-		path: path.resolve(__dirname, 'public/build'),
+		path: path.resolve(__dirname, '../dist'),
+		publicPath: '/',
+		pathinfo: false,
 	},
 	module: {
-		rules: [{
-			test: /\.css$/,
-			use: ['style-loader', 'css-loader'],
-		},
-		{
-			test: /\.m?js$/,
-			exclude: /(node_modules|bower_components)/,
-			use: {
-				loader: 'babel-loader',
+		rules: [
+			{
+				test: /\.m?js$/,
+				exclude: /(node_modules|bower_components)/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: ['@babel/preset-env'],
+					},
+				},
+			},
+			{
+				test: /\.ohm$/,
+				use: ['raw-loader'],
+			},
+			{
+				test: /\.css$/,
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader,
+						options: {
+							publicPath: '/css',
+							name: path.posix.join('/css', '[name].[ext]'),
+						},
+					},
+					'css-loader',
+				],
+			},
+			{
+				test: /\.(png|jpe?g|gif|svg)$/,
+				loader: 'file-loader',
+				options: {
+					limit: 100,
+					name: path.posix.join('img', '[name].[ext]'),
+				},
+			},
+			{
+				test: /\.(mp3)$/,
+				loader: 'file-loader',
 				options: {
-					presets: ['@babel/preset-env'],
+					limit: 10000,
+					name: path.posix.join('audio', '[name].[ext]'),
 				},
 			},
-		}],
+		],
 	},
+	plugins: [
+		new CleanWebpackPlugin(['dist']),
+		new HtmlWebpackPlugin({
+			filename: 'index.html',
+			template: './src/static/editor.html',
+			title: 'SLANG',
+			inject: true,
+		}),
+		new MiniCssExtractPlugin({
+			filename: '[name].css',
+			chunkFilename: '[id].css',
+		}),
+	],
 };