Skip to content

CodeCoupler Webpack Configuration Reference

In the webpack.cc-config.js you can define some paramaters to adjust the base cc-webpack configuration.

  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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
module.exports = {

  // The objects "bundle", "staticParser" and "production" manage settings
  // that will be used in the webpack configuration, loaders and plugins
  // in a simplified form. With the object "plugins" you can overwrite plugin
  // options and manage them more advanced.

  // Settings in "bundle" manage the output that will be generated.
  bundle: {

    // Name of the bundled JavaScript file.
    // Default: Package name from package.json without scope
    jsName: "string",

    // Name of the bundled Stylesheet file.
    // Default: Package name from package.json without scope
    cssName: "string",

    // Variablename where the exports of your library will be assigned.
    // Default: Package name from package.json without scope converted into camel case
    // Example:
    //  Packagename: @some-scope/name-with_underscoder~and~tilde
    //  Result: NameWithUnderscoreAndTilde
    libraryName: "string",

    // Variablename where to find the publicPath in runtime.
    // Default: Package name from package.json without scope converted into camel case and prefixed
    //          with "pathTo"
    // Example:
    //  Packagename: @some-scope/name-with_underscoder~and~tilde
    //  Result: pathToNameWithUnderscoreAndTilde
    pathVarName: "string",

    // Subfolder where chunks for dynamic imports will be saved.
    // Default: "parts"
    chunkSubfolder: "string"

    // Subfolder where externalized assets will be saved.
    // Default: "vendor"
    externalsSubfolder: "string",

    // Subfolder where generated favicons will be saved.
    // Default: "favicon"
    faviconSubfolder: "string",

    // Function to convert the local paths of "externals" to a CDN link.
    //
    // Default: (name, version, path) => `//cdn.jsdelivr.net/npm/${name}@${version}/${path}`
    //
    // Example for using unpkg: (name, version, path) => "//unpkg.com/${name}@${version}/${path}"
    getCdnPath: function

  },

  // Settings in "staticParser" manage the copy process from files in the "static" folder.
  staticParser: {

    // Array of relative paths to HTML files in static folder which should be parsed.
    // Default: Result of glob **/*.html
    htmlTemplates: ["string", "string"],

    // If "true" the tags for including the final bundle and external JavaScript and
    // Stylesheet files will be injected into the html templates.
    // Default: true
    htmlInject: Boolean,

    // Can be "blocking" or "defer". If "defer" the script tags will be loaded in "head"
    // and with the attribute "defer" set. If you use "defer" please note that you execute
    // your scripts after the DOM is loaded. please note the proportion of browsers that
    // support the defer attribute: https://caniuse.com/script-defer
    // Default: 'blocking'
    scriptLoading: String,

    // Filename or relative path of source image for favicon creation.
    // Setting this to "null" will be disable this feature.
    // Default: "logo.png"
    favicon: "string",

    // If true the source image of the favicons will be copied into the dist folder.
    // Default: true
    keepFaviconSource: Boolean

  },

  // Settings in "production" manage special setting that will be used in production mode.
  production: {

    // Banner to add into your build result.
    // Default: ${PACKAGE.name} ${PACKAGE.version}
    //          Copyright (c) ${new Date().getFullYear()} ${PACKAGE.author}
    //          License: ${PACKAGE.license}`
    banner: "string"

  },

  // The following settings can be used to overwrite the options used for
  // the plugins. You have to use these settings very carefully because they
  // could break main features of "cc-webpack".
  //
  // Your settings will be deep merged with the settings of "cc-webpack".
  //
  // Only the plugins "copy-webpack-plugin" and "html-webpack-plugin" cannot
  // be modified as the options are very specific to the process of copying
  // the files from "static" to "dist".

  plugins: {

    // Set options for the "clean-webpack-plugin". "cc-webpack" do
    // not use any options byself. So you can use this without risk.
    CleanWebpackPlugin: {},

    // Set options for the "webpack-bar". "cc-webpack" do
    // not use any options byself. So you can use this without risk.
    WebpackBar: {},

    // Set options for the "mini-css-extract-plugin". "cc-webpack" will
    // use for "filename" the settings from above "bundle.cssName". So
    // pay attention!
    MiniCssExtractPlugin: {},

    // Set options for the "stylelint-webpack-plugin". "cc-webpack" will
    // use for "files" the value "./src/**/*.css". So pay attention!
    StylelintWebpackPlugin: {},

    // Set options for the "webpack-require-from". "cc-webpack" will
    // use for "suppressErrors" the value "true" and for "variableName" the
    // settings from above "bundle.pathVarName". So pay attention!
    WebpackRequireFrom: {},

    // Set options for the "favicons-webpack-plugin". Please note that
    // this plugin will not be used if "staticParser.favicon" was set
    // to "null". "cc-webpack" will use for "inject" the value "force",
    // for "logo" the settings from above "staticParser.favicon" and
    // for "prefix" the settings from above "bundle.faviconSubfolder".
    // So pay attention!
    FaviconsWebpackPlugin: {},

    // Set options for the "cc-webpack-externals-plugin". "cc-webpack"
    // will use for "packagesPath" the settings from above "bundle.externalsSubfolder"
    // and for "getCdnPath" the settings from above "bundle.getCdnPath".
    // "useCdn" will be set according to cli arguments. So pay attention!
    CcWebpackExternalsPlugin: {},

    // Set options for the "banner-plugin". "cc-webpack" will use for
    // "banner" the settings from above "production.banner". So pay
    // attention!
    BannerPlugin: {},

  }

};