p5js: package.json + webpack.config.js

p5js: package.json + webpack.config.js

config for modernizing and running generator-p5-webpack

🏂 package.json
🍖 webpack.config.js

package.json

{
  "name": "emoni-within",
  "version": "0.1.0",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "npm run clean && webpack --mode production",
    "clean": "rm -rf dist"
  },
  "dependencies": {
    "p5": "^1.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "html-webpack-plugin": "^5.4.0",
    "webpack": "^5.59.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  }
}

webpack.config.js

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    bundle: path.resolve(__dirname, "src", "index.js"),
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, "src"),
    },
    port: 8080,
    open: true,
    allowedHosts: [
      "avalon.local",
    ],
  },
  stats: "minimal",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[chunkhash].js",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/g,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      inject: "body",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "assets"),
          to: path.resolve(__dirname, "dist", "assets"),
        },
      ],
    }),
  ],
  devtool: "source-map",
};