webpack.config.js

// Copyright 2019 British Broadcasting Corporation
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import path from "path";
import CircularDependencyPlugin from "circular-dependency-plugin";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
    target: [
        "web",
        "es2020",
      ],
    mode: "development",
    entry: [
        "./src/index.es6",
    ],
    plugins: [
        new CircularDependencyPlugin({
            // `onStart` is called before the cycle detection starts
            onStart() {
                console.log("start detecting webpack modules cycles");
            },
            // `onDetected` is called for each module that is cyclical
            onDetected({ paths, compilation }) {
                // `paths` will be an Array of the relative module paths that make up the cycle
                // `module` will be the module record generated by webpack that caused the cycle
                compilation.errors.push(new Error(paths.join(" -> ")));
            },
            // `onEnd` is called before the cycle detection ends
            onEnd() {
                console.log("end detecting webpack modules cycles");
            },
            cwd: process.cwd(),
        }),
    ],
    experiments: {
        outputModule: true,
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "./bin/js/bundle.js",
        library: {
            type: "module",
        },
    },
    devServer: {
        contentBase: "./dist",
        index: "index.html",
        watchContentBase: true,
    },
    module: {
        rules: [
            {
                test: /\.(es6|js)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
        ],
    },
};