webpack.config.js

   1 const path = require("path");
   2 const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
   3 const webpack = require("webpack");
   4
   5 module.exports = {
   6     mode: "production",
   7     entry: {
   8         main: "./web/htdocs/js/index.js",
   9         mobile: "./web/htdocs/js/mobile.js",
  10         side: "./web/htdocs/js/side_index.js",
  11         themes: [
  12             "./web/htdocs/themes/facelift/theme.scss",
  13             "./web/htdocs/themes/classic/theme.scss",
  14         ],
  15     },
  16     output: {
  17         path: path.resolve(__dirname, "web/htdocs/js"),
  18         filename: "[name]_min.js",
  19         publicPath: "js",
  20         // Keep this until we have cleaned up our JS files to work as modules and changed all call sites
  21         // from HTML code to work with the modules. Until then we need to keep the old behaviour of loading
  22         // all JS code in the global namespace
  23         libraryTarget: "window",
  24         libraryExport: "default"
  25     },
  26     resolve: {
  27         modules: [
  28             "node_modules",
  29             path.resolve(__dirname, "web/htdocs/js/modules"),
  30             path.resolve(__dirname, "enterprise/web/htdocs/js/modules")
  31         ]
  32     },
  33     module: {
  34         rules: [
  35             {
  36                 test: /\.js$/,
  37                 exclude: /node_modules/,
  38                 use: {
  39                     loader: "babel-loader",
  40                     options: {
  41                         presets: ["@babel/preset-env"]
  42                     }
  43                 }
  44             },
  45
  46             // needed for theme CSS files
  47             {
  48                 test: /\.scss$/,
  49                 use: [
  50                     // 5. Write to theme specific file
  51                     {
  52                         loader: "file-loader",
  53                         options: {
  54                             regExp: /\/([a-z0-9_-]+)\/([a-z0-9_-]+)\.scss$/,
  55                             name: "../themes/[1]/[2].css"
  56                         }
  57                     },
  58                     // 4. Extract CSS definitions from JS wrapped CSS
  59                     {
  60                         loader: "extract-loader"
  61                     },
  62                     // 3. Interpret and resolve @import / url()
  63                     {
  64                         loader: "css-loader",
  65                         options: {
  66                             url: false,
  67                             importLoaders: 2
  68                         },
  69                     },
  70                     // 2. Some postprocessing of CSS definitions (see postcss.config.js)
  71                     // - add browser vendor prefixes https://github.com/postcss/autoprefixer
  72                     // - minifies CSS with https://github.com/jakubpawlowicz/clean-css
  73                     {
  74                         loader: "postcss-loader"
  75                     },
  76                     // 1. Transform sass definitions into CSS
  77                     {
  78                         loader: "sass-loader",
  79                         options: {
  80                             // Hand over build options from webpack to SASS
  81                             data: "$ENTERPRISE: " + process.env.ENTERPRISE + ";\n"
  82                                 + "$MANAGED: " + process.env.MANAGED + ";",
  83                             "includePaths": ["node_modules"],
  84                             // See https://github.com/sass/node-sass/blob/master/README.md#options
  85                             outputStyle: "expanded",
  86                             precision: 10
  87                         }
  88                     }
  89                 ]
  90             },
  91         ]
  92     },
  93     plugins: [
  94         new FixStyleOnlyEntriesPlugin(),
  95         new webpack.EnvironmentPlugin(["ENTERPRISE", "MANAGED"]),
  96     ]
  97 };