Much better webpack workflow

.gitignore

@@ -3,5 +3,4 @@
 
 # Webpack asset destination
 /content/assets
-/content/_data/assets.json
-webpack.hash
+.webpack

assets/scripts/main.js

@@ -8,3 +8,6 @@ const main = async () => {
 };
 
 main();
+
+const yourl = new URL(window.location);
+console.log(yourl);

assets/styles/main.css

@@ -3,5 +3,5 @@
 @import "tailwindcss/utilities";
 
 body {
-    background-color: cornflowerblue;
+    background: green;
 }

build/webpack.config.base.js

@@ -0,0 +1,16 @@
+const path = require('path')
+
+module.exports = {
+    cache: {
+        type: 'filesystem',
+        cacheDirectory: path.resolve(__dirname, '..', '.webpack')
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, '..', 'content', 'assets'),
+        publicPath: "/",
+    },
+    mode: process.env.NODE_ENV || 'development',
+    devtool: 'source-map',
+    stats: 'errors-only',
+}

build/webpack.config.legacy.js

@@ -0,0 +1,48 @@
+const base = require('./webpack.config.base')
+const path = require('path');
+
+module.exports = {
+    ...base,
+
+    name: 'legacy',
+    entry: {
+        legacy: [
+            path.join(__dirname, '..', 'assets', 'scripts', 'main.js'),
+        ],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        babelrc: false,
+                        exclude: [
+                            /core-js/,
+                            /regenerator-runtime/,
+                        ],
+                        presets: [
+                            ['@babel/preset-env', {
+                                loose: true,
+                                modules: false,
+                                // debug: true,
+                                corejs: 3,
+                                useBuiltIns: 'usage',
+                                targets: {
+                                    browsers: [
+                                        '> 1%',
+                                        'last 2 versions',
+                                        'Firefox ESR',
+                                    ],
+                                },
+                            }],
+                        ],
+                        sourceType: 'unambiguous',
+                        plugins: ['@babel/plugin-syntax-dynamic-import'],
+                    },
+                },
+            },
+        ]
+    }
+}

build/webpack.config.main.js

@@ -0,0 +1,76 @@
+const base = require('./webpack.config.base')
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+    ...base,
+
+    name: 'main',
+    entry: {
+        main: [
+            path.join(__dirname, '..', 'assets', 'scripts', 'main.js'),
+            path.join(__dirname, '..', 'assets', 'styles', 'main.css'),
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+        }),
+    ],
+    devServer: {
+        contentBase: path.join(__dirname, '..', 'dist'),
+        compress: true,
+        port: 9000,
+        watchContentBase: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        babelrc: false,
+                        exclude: [
+                            /core-js/,
+                            /regenerator-runtime/,
+                        ],
+                        presets: [
+                            ['@babel/preset-env', {
+                                loose: true,
+                                modules: false,
+                                // debug: true,
+                                corejs: 3,
+                                useBuiltIns: 'usage',
+                                targets: {
+                                    browsers: [
+                                        'last 2 Chrome versions', 'not Chrome < 60',
+                                        'last 2 Safari versions', 'not Safari < 10.1',
+                                        'last 2 iOS versions', 'not iOS < 10.3',
+                                        'last 2 Firefox versions', 'not Firefox < 54',
+                                        'last 2 Edge versions', 'not Edge < 15',
+                                    ],
+                                },
+                            }],
+                        ],
+                        sourceType: 'unambiguous',
+                        plugins: ['@babel/plugin-syntax-dynamic-import'],
+                    },
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1
+                        },
+                    },
+                    'postcss-loader',
+                ]
+            },
+        ]
+    }
+}

content/_includes/foot.njk

@@ -1 +1,3 @@
-{% include "partials/nomodule-polyfill.njk" %}
+{% include "partials/nomodule-polyfill.njk" %}
+<script type="module" src="/main.js"></script>
+<script nomodule src="/legacy.js"></script>

content/_includes/head.njk

@@ -4,6 +4,5 @@
     <meta name="description" content="{{ description }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="/{{ assets.modern.css }}" />
-    <script type="module" src="/{{ assets.modern.mjs }}"></script>
+    <link rel="stylesheet" href="/main.css" />
 </head>

content/_layouts/app.njk

@@ -1,7 +1,7 @@
 <!doctype html>
 <html class="no-js" lang="en">
 {% include "head.njk" %}
-<body class="bg-green-50">
+<body class="bg-blue-500">
 {{ content | safe }}
 </body>
 {% include "foot.njk" %}

content/index.njk

@@ -11,5 +11,4 @@ description: "11ty starter pack"
     <div class="p-10">
         {% cl_img { path: 'elf.jpg', css: 'max-w-full w-96 mx-auto rounded-lg', title: "hello", size: 430, srcset: [640, 768, 1024], alt: "not actually a photo", attrs: [['data-something', 'why']] } %}
     </div>
-    <img src="/{% asset_image assets, 'dog-face.png' %}" />
 </div>

netlify.toml

@@ -5,7 +5,7 @@
 [[plugins]]
 package = "netlify-plugin-cache"
     [plugins.inputs]
-    paths = ["content/assets", "content/_data/assets.json", "webpack.hash"]
+    paths = ['.webpack']
 
 [build.processing]
     skip_processing = false