cms/webpack.config.mjs at 6.x · ACP3/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { globbySync } from "globby";
import componentPaths from "./build/gulp/helpers/component-paths.mjs";
import TerserPlugin from "terser-webpack-plugin";
import browserslist from "browserslist";
import { WebpackAssetsManifest } from "webpack-assets-manifest";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import RemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import * as lightningcss from "lightningcss";
import * as sassEmbedded from "sass-embedded";

const entries = globbySync([
  ...componentPaths.scss.all,
  ...componentPaths.js.all,
  "./designs/*/*/Resources/Assets/js/!(*.min).js",
]);
const entryPointMap = new Map();
for (const entryPoint of entries) {
  entryPointMap.set(entryPoint, entryPoint);
}

const webpackEntryConfig = {};
entryPointMap.forEach((path, entryName) => {
  webpackEntryConfig[
    entryName
      .substring(2)
      .replaceAll("scss", "css")
      .replace(/\.((m?js)|css)/, "")
      .replaceAll("/", "-")
      .toLocaleLowerCase()
  ] = {
    import: path,
  };
});

export default {
  devtool: "source-map",
  mode: "production",
  entry: webpackEntryConfig,
  output: {
    publicPath: "/uploads/assets/",
    filename: "js/[name].[contenthash].js",
    sourceMapFilename: "js/[name].[contenthash].map",
    chunkFilename: "js/[id].[chunkhash].js",
  },
  resolve: {
    alias: componentPaths.pathAliases,
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: { importers: [new sassEmbedded.NodePackageImporter()] },
            },
          },
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "swc-loader",
          options: {
            env: {
              coreJs: "3.44",
              mode: "usage",
              targets: browserslist(),
            },
          },
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "fonts/[hash][ext][query]",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
    },
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify,
        minimizerOptions: {
          targets: lightningcss.browserslistToTargets(browserslist()),
        },
      }),
      new TerserPlugin({
        minify: TerserPlugin.swcMinify,
        extractComments: false,
        terserOptions: {
          format: {
            comments: false,
          },
        },
      }),
    ],
  },
  plugins: [
    new WebpackAssetsManifest({
      entrypoints: true,
      entrypointsKey: false,
    }),
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
      chunkFilename: "css/[id].[chunkhash].css",
      ignoreOrder: true,
    }),
  ],
};