CodeCoupler Webpack Development Details: Generation of Webpack Configuration

The essential task of cc-webpack is to generate a Webpack configuration on the fly and start build and packaging. The generated and used Webpack configuration works as follows:

{

  // "cwd" is by default "process.cwd()" which can be overwritten
  // with the "--cwd" option (from Version 3)

  // The assetFilter mute the perfomance counter for static assets,
  // favicons and external libraries:
  performance: { assetFilter: [Function: assetFilter] },

  // To keep the code clean we should import all other filetypes
  // including their extensions:
  resolve: {
    extensions: [ '.js', '.ts' ]
  },

  // Use the arguments to define mode and source-map generation
  // Till 3.1 `devtool: "source-map"` was used in production mode
  // From 3.7 devtool value can be overriden by argument `--devtool`
  // From 3.12.1 devtool value in production mode fixed to "false" instead "undefined"      
  // From 4.5.3: devtool in development mode switched from eval-source-map to
  // cheap-module-source-map. eval-source-map have problems to get the correct line
  // numbers and map to filenames. Read also this comment:
  // https://github.com/webpack/webpack/issues/2145#issuecomment-294361203
  mode: args.mode || "development",
  devtool: args.devtool ?? (args.mode == "production" ? false : "cheap-module-source-map"),

  optimization: {
    minimizer: [
      // This was added because otherwise the banner from the BannerPlugin will
      // be removed and placed into a separate file "<output.filename>.LICENSE.txt"
      new TerserPlugin({
        extractComments: false
      }),
      // Added in Version 3.13 to remove all comments in
      // imported CSS and keep only our banner.
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: {
                removeAll: true,
              },
            },
          ],
        },
      }),
    ]
  },

  // Use index.js as entry and bundle everything in one file.
  // Remark: Versions before 1.5 parsed each js and ts file
  // with entry: glob.sync("./src/**/*.@(js|ts)")
  entry: path.join(cwd, "src/index.js"),
  output: {
    // The default value will extracted from the name in "package.json"
    // The name can be overwritten by the cc-webpack configuration.
    // Appending a contenthash can be disabled by the cc-webpack configuration.
    filename: 'my-library.[contenthash].js',
    // The chunkFilename is defined for dynamic imports.
    // The prefix "parts" can be defined in the cc-webpack configuration.
    chunkFilename: 'parts/[name].js',
    // The destination.
    path: path.join(cwd, "dist"),
    // If we do not set this in Webpack 5 the dynamic imports
    // will always be prefixed by the word "auto". Furthermore
    // if not set to "/" the webpack devServer option "historyApiFallback" 
    // will not work in some cases. This option is essential for SPA-Applications.
    //
    // Till Version 4.7.0 it was an empty string by default.
    publicPath: "/",
    // From version 3:
    // The destination of imported assets. the function will keep
    // the folder structure of the assets and add a hash to the filename.
    assetModuleFilename: Function,
    // Till version 3.3.0 it was just: `library: Get from config bundle.libraryName`
    // With this the library could be used with script tags. However, if you wanted
    // to bundle the library into your own project, there was the problem that the
    // exports did not work properly (`import { `something` } from "myLibrary"` was
    // always undefined). Therefore, the library had to be externalized in the
    // follow-up project as well. That's why the type "umd" was added from version 3.3.1
    // onwards. However, this led to problems with resolving the library's externals.
    // For example, the library looked for the "$" module instead of the "jquery" module.
    // We told the library that the "jquery" module should be resolved using the globaly
    // variable "$". So we had to add the setting `externalsType: "global"` for this.
    library: {
        name: Get from config bundle.libraryName,
        type: "umd",
    }
  },
  // See above in setting "output.library".
  externalsType: "global",

  // Make the console output cleaner:
  stats: "errors-warnings",

  //This setting was inserted to work the full page reload
  //of the webpack-dev-server on source changing. The new
  //default value "browserlist" of webpack 5 will break
  //this feature: https://github.com/webpack/webpack-dev-server/issues/2758#issuecomment-708144038
  //Even the new feature to set here an array will break
  //the feature: https://github.com/webpack/webpack-dev-server/issues/2758#issuecomment-779445432
  target: "web",

  // This is the default configuration of the devServer:
  devServer: {
    // Removed in Version 3:
    //   stats: "errors-warnings",
    //   contentBase: path.join(cwd, "dist"),
    // Removed in Version 4.5.6:
    //   static: { directory: path.join(cwd, "dist") },
    open: true
  },

  // Now the plugins:
  plugins: [

    // To clean up dist folder:
    CleanWebpackPlugin {},

    // Just a fancy progressbar
    WebpackBarPlugin {},

    // Copy static files which do not need injection:
    CopyPlugin {
      patterns: [
        // Here a list of all static files will be generated
        // except:
        // - HTML files (defined in staticParser.htmlTemplates),
        // - favicon source file (if staticParser.keepFaviconSource was set to "false"),
        // - inc folder (if staticParser.keepIncSource was set to "false"),
        // - manifest override file (if staticParser.keepManifestSource was set to "false"),
      ],
    },

    // To put the parsed CSS files in a separate file:
    // The name can be overwritten by the cc-webpack configuration.
    // Appending a contenthash can be disabled by the cc-webpack configuration.
    MiniCssExtractPlugin {
      options: {
        filename: 'my-library.[contenthash].css',
        // The chunkFilename is defined for dynamic imports.
        // The prefix "parts" can be defined in the cc-webpack configuration.
        chunkFilename: `parts/[name].css`,
      }
    },

    // For linting CSS files:
    new StyleLintPlugin({
      files: "./src/**/*.css"
    }),

    // This plugin allows to set the publicPath for dynamic imports
    // into a global variable. With this you can install your library
    // anywhere you want and the dynamic imports will work:
    WebpackRequireFrom {
      options: { variableName: 'pathToMyLibrary', suppressErrors: true },
    },

    // Needed to load vue files
    VueLoaderPlugin {},

    // Parse all HTML files in static folder.
    //
    // The properties "inject" and "scriptLoading" can be defined
    // in the CodeCoupler Webppack Configuration "webpack.cc-config.js".
    //
    // Note on "template":
    // By default the HtmlWebPlugin use the defined webpack loader.
    // But this loader (html-loader) do not parse variable names like
    // "<%= htmlWebpackPlugin.tags.headTags %>". We could define a
    // loader chain like described here: https://github.com/webpack-contrib/html-loader/issues/195
    // or force to use the "ejs-loader" like done here.
    //
    // Note on "scriptLoading":
    // The new value starting with webpack 5 and the corresponding plugin
    // version is "defer". It is ok to set this value to this value, but
    // you have to know that you cannot start executing scripts in your
    // "index.js", but you have to wait the DOM is loaded. Furthermore
    // approximately 2% of the browsers out there do not understand this
    // attribute. So we stay for now injecting the scripts to the end of the
    // body and not use the "defer" attribute.
    HtmlWebpackPlugin {
      options: {
        template: '!!ejs-loader?esModule=false!./static/index.html',
        filename: 'index.html',
        inject: true,
        scriptLoading: 'blocking'
      },
    },
    // ... this will be repeated for each HTML file

    // Generate favicons and Manifest. Inject the links to them always
    // in all HTML files parsed by HtmlWebpackPlugin (which will be all the
    // files in the static folder). Logo and prefix can be configured
    // in cc-webpack configuration:
    FaviconsWebpackPlugin {
      options: {
        inject: 'force',
        prefix: Get from config bundle.faviconSubfolder,
        logo: Get from config staticParser.favicon,
        manifest: Get from config staticParser.manifest
      }
    },

    // This plugin will set the webpack "externals" option
    // and furthermore copy the needed libraries to the output folder
    // and inject HTML files with the needed tags.
    ccWebpackExternalsPlugin {
      useCdn: args.externalsCdn ? true : false,
      getCdnPath: Get from config bundle.getCdnPath,
    },

    // Banner Plugin will be used only in production mode. In Version 3.13 we added the
    // CssMinimizerPlugin to remove comments from imported CSS. This resulted in our banner also
    // being removed from the final CSS bundle. We have to add the "stage" property to add the
    // banner message after minimizers and any asset manipulation.
    BannerPlugin({
      banner: Get from config production.banner,
      stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
    }),

    // The new way to integrate eslint in Webpack 5 instead
    // using eslint-loader:
    new ESLintPlugin({
      extensions: ["js", "ts"],
    }),


    new SpritePlugin(),

  ],

  // Now the modules:
  module: {
    rules: [
      // *.vue: vue-loader
      // The option { hotReload: false } was added in version 3 because the Hot Module Replacement
      // of the devServer collides with the Hot Module Replacement of the loader.
      {
        test: /\.vue$/,
        //Removed in Version 2.5
        //exclude: /node_modules/,
        loader: 'vue-loader',
        options: { hotReload: false }
      },

      // *.html: html-loader
      // *.template.html: ejs-loader
      // *.ejs.html: ejs-compiled-loader
      // This is to import (statically or dynamic) of HTML files.
      // With the extension "*.ejs.html" EJD variables can be used.
      // Version 2: Images or other external assets will not be considered.
      // Version 3: Images or other external assets will be considered.
      {
        test: /\.html$/,
        oneOf: [
          {
            test: /\.template.html$/i,
            loader: "ejs-loader",
            options: {
              variable: "locals",
            },
          },
          {
            test: /\.ejs.html$/,
            //Removed in Version 2.5
            //exclude: /node_modules/,
            loader: "ejs-compiled-loader",
            options: {
              variable: "data"
            }
          },
          {
            exclude: /node_modules/,
            loader: "html-loader",
            //Removed in Version 3
            // options: {
            //   sources: false
            // }
          }
        ]
      },

      // *.ts: (eslint over its plugin) > ts > babel
      // ESLint will use the special configuration from ".eslintrc".
      // The ts-loader is prepared to work with vue files with <script lang="ts">
      // The ts-compiler will translate them into JavaScript and babel
      // will translate them into browser compatible JavaScript:
      {
        test: /\.ts$/,
        //Removed in Version 2.5
        //exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            //In Versions before 1.5 "options" was used to specify
            //the babel configuration dynamically. This now will be
            //done by the .babelrc file.
          },
          {
            loader: 'ts-loader',
            options: { appendTsSuffixTo: [ /.vue$/ ] }
          }
        ]
      },

      // *.css, *.postcss, *.s[ac]ss:
      //    sass-loader > postcss (with autprefixer)
      //    > css-loader > extract-plugin
      //
      // sass-loader: (From Version 3 only) Loads a SASS/SCSS file
      // and compiles it to CSS.
      //
      // postcss: Translate them into browser compatible CSS. You
      // have to add a postcss configuration file to add plugins
      // like "postcss-preset-env" to automatically add prefixes
      // and transpile features to work with targeted browsers.
      //
      // css-loader: Include them (and their dependecies) into
      // the final build and interprets `@import` and `url()`
      // like `import/require()`.
      //
      // The condition /\.postcss$/ is used for vue files containing
      // a <style lang="postcss"> tag. The lang attribute is used for
      // syntax highlighting and validating of Vetur.
      //
      // Enables CSS Module compilation for files ending with
      // "modules.css", "modules-global.css", "modules-local.css" and
      // "modules-pure.css"
      {
        test: [/\.css$/, /\.postcss$/, /\.s[ac]ss$/i],
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // From Version 3.4:
              // This option is important for vue css modules <style module>.
              // Otherwise a warning will be thrown exort "exoprt 'default' not found (module has no
              // exports)"
              defaultExport: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              //Removed in Version 3
              //url: false,
              modules: {
                mode: (ressourcePath) => {
                  //Return "pure" for vue files (From 3.4, If <style module> was used)
                  //Returns "global" for module.css and module-global.css files
                  //Returns "local" for module-local.css files
                  //Returns "pure" module-pure.css files
                  //All other returns "local" (Till 3.3 all other returned "false", which was not correct)
                },
                auto: (resourcePath, resourceQuery, resourceFragment) => {
                  // From 3.4: Return true if file ends with ".vue" and query includes "module=true"
                  // Otherwise returns if filename matching /\.module(-(global|local|pure))?\.css$/
              },
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader'
          },
          // From Version 3:
          {
            loader: "sass-loader",
            // From Version 3.8.0: Switched to sass-embedded and modern-compiler.
            // From Version 4.1:   Some Deprecation Warnings disabled to work with latest Bootstrap
            //                     version.
            // From Version 4.5.5: Switched back to sass. Somehow sass-embedded do not work as
            //                     expected. After the message "compiled successfully" the process
            //                     hangs. After investigating this, it was found that the
            //                     embedded-sass process does not terminate. This causes webpack to
            //                     wait forever.
            options: {
              // Used this for sass
              api: "modern",
              // Used this for sass-embedded
              // api: "modern-compiler",
              // sassOptions: {
              //   silenceDeprecations: [
              //     "mixed-decls",
              //     "color-functions",
              //     "global-builtin",
              //     "import",
              //   ],
              // },
            },
          },
        ]
      },

      // *.js: (eslint over its plugin) > babel
      // ESLint will use the special configuration from ".eslintrc".
      // Babel finally translate them into browser compatible JavaScript:
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            //In Versions before 1.5 "options" was used to specify
            //the babel configuration dynamically. This now will be
            //done by the .babelrc file.
          }
        ]
      },

      // *.svg: svgo > asset/source or asset/inline or asset/ressource or svg-sprite-loader
      // Different ways to import SVG files. Can be controlled via queries.
      // Works from version 4.1 without any bugs.
      {
        test: /\.svg$/,
        oneOf: [
          {
            resourceQuery: /source/,
            type: "asset/source",
            use: "svgo-loader",
          },
          {
            resourceQuery: /sprite/,
            use: [
              {
                loader: "svg-sprite-loader",
              },
              "svgo-loader",
            ],
          },
          {
            type: "asset",
            use: "svgo-loader",
            generator: {
              dataUrl: (content) => {
                content = content.toString();
                return svgToMiniDataURI(content);
              },
            },
          },
        ],
      },

      // Extract all imported assets of the html-loader and css-loader. The
      // "test" can be specified in the configuration (assets_test)
      // Default of test:
      //  Till Version 4.0: /(\.png|\.jpg)/
      //  From Version 4.1: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/i
      {
        test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/i,
        type: 'asset',
      },

    ]
  }
}