kitsune/webpack.common.js at main · escattone/kitsune · 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
124
125
126
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const svelteScssPreprocess = require("./webpack/svelte-scss-preprocess");

module.exports = {
  mode: "development",
  resolve: {
    alias: {
      tomselect: "tom-select/dist",
      protocol: "@mozilla-protocol/core/protocol",
      sumo: path.resolve(__dirname, "kitsune/sumo/static/sumo"),
      community: path.resolve(__dirname, "kitsune/community/static/community"),
      kpi: path.resolve(__dirname, "kitsune/kpi/static/kpi"),
    },
    extensions: [".mjs", ".js", ".svelte"],
    mainFields: ["svelte", "browser", "module", "main"],
    conditionNames: ["svelte", "browser", "import"],
  },
  module: {
    rules: [
      {
        test: /\.(js|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            // Babel 8 defaults to Browserslist's "defaults" query. Keep Babel 7's
            // all-browser target until we change browser support intentionally.
            targets: ">= 0%",
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  version: "^8.0.5",
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.njk$/,
        use: {
          loader: path.resolve("./webpack/nunjucks-loader"),
        },
      },
      {
        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
          options: {
            emitCss: true,
            preprocess: svelteScssPreprocess,
          },
        },
      },
      {
        // required to prevent errors from Svelte on Webpack 5+
        test: /node_modules\/svelte\/.*\.mjs$/,
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.s?css$/,
        exclude: /\.styles.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.styles.scss$/,
        exclude: /node_modules/,
        type: "asset/resource",
        use: ["sass-loader"],
        generator: {
          filename: "[name].[contenthash].css"
        }
      },
      {
        test: /\.(svg|png|webp|gif|woff2?)$/,
        type: "asset/resource",
      },
      // we copy these libraries from external sources, so define their exports here,
      // rather than having to modify them, making updating them more difficult:
      exports(
        "./kitsune/sumo/static/sumo/js/libs/uitour.js",
        "default Mozilla.UITour"
      ),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env),
    }),
  ],
  cache: {
    type: "filesystem",
  },
  devtool: "cheap-module-source-map",
  output: {
    filename: "[name].js",
    // be sure to update kitsune.settings.WHITENOISE_IMMUTABLE_FILE_TEST if changing this:
    hashDigestLength: 16,
  },
};

function exports(path, exports) {
  // export the named variable
  return {
    test: require.resolve(path),
    loader: "exports-loader",
    options: {
      type: "module",
      exports,
    },
  };
}