Skip to content

CodeCoupler Webpack Configuration Reference

You have two places in which you can modify the resulting webpack configuration:

  1. webpack.cc-config.js: Set certain options that are taken into account when building the webpack configuration.
  2. webpack.config.js: Into the classic webpack configuration file you can override every single property of the resulting configuration, or add new ones. Entries in this file take precedence1.

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
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,

    // If true a hash value will be included in the bundle file name.
    // Should be disabled for libraries.
    // Default: true
    jsNameHashed: Boolean,

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

    // If true a hash value will be included in the bundle file name.
    // Should be disabled for libraries.
    // Default: true
    cssNameHashed: Boolean,

    // 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. This affects js and css files.
    // Default: "parts"
    chunkSubfolder: String

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

    // Subfolder where generated favicons will be saved.
    // Default: "manifest" (Till Version 3.2.2: "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

    // Which files are considered assets (From Version 3.5)
    // Default: /(\.png|\.jpg)/
    assetsTest: Regex,

  },

  // 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.
    // If set to a function the argument "cwd" is the path to the static folder.
    // Default: Result of glob("**/*.html", {cwd: cwd,  ignore "inc/**"})
    htmlTemplates: Array<String> | Function(cwd),

    // Array of globs to filenames (relative to the static folder) that will be ignored. You cannot
    // use foldernames here.
    // Default: []
    ignore: Array<String>,

    // Set here what loader will be used to read the HTML files. By default the
    // package "ejs-compiled-loader" will be used. So you can without any additionally
    // libraries include parts from other files.
    //
    // You can use here for example the package "ejs-loader" which use the underscore
    // template function to parse EJS tags. In that case you have to pay attention to
    // the following points:
    //
    //   1. Set the option to "ejs-loader?esModules=false"
    //   2. If you want to place head and body tags in another place you have to use
    //
    //        <%= htmlWebpackPlugin.tags.headTags %>
    //        <%= htmlWebpackPlugin.tags.bodyTags %>
    //
    //      instead of
    //
    //        <%- htmlWebpackPlugin.tags.headTags %>
    //        <%- htmlWebpackPlugin.tags.bodyTags %>
    //
    // Default: "ejs-compiled-loader"
    loader: 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:
    //    Till Version 2: "logo.png"
    //    From Version 3: "favicon.png"
    favicon: String,

    // If true the source image of the favicons will be copied into the dist folder.
    // Default: false (Till Version 3.2.2: true)
    keepFaviconSource: Boolean

    // Filename or relative path of override file for manifest creation (From Version 3.2.2).
    // Setting this to "null" will be disable this feature.
    // Attention: Setting "favicon" to "null" will also disable this feature!
    // Default: "manifest.webmanifest"
    manifest: String,

    // If true the override manifest file will be copied into the dist folder.
    // Default: false (From Version 3.3)
    keepManifestSource: Boolean

    // If true the inc folder will be copied into the dist folder.
    // Default: false (From Version 3.3)
    keepIncSource: 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: {},

  },

  // The following settings can be used to extend the options used for
  // the loaders. 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".

loaders: {

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


    // Set options for the "html-loader". "cc-webpack" will use it for setting
    // "sources: false" which can be overriden here.
    html: {},

    // Set options for the "babel-loader" used for TypeScript files and JavaScript
    // files. "cc-webpack" do not use any options byself. So you can use this without
    // risk.
    babel_ts: {},
    babel_js: {}


    // Set options for the "ts-loader". "cc-webpack" will use it for setting
    // "appendTsSuffixTo: [/.vue$/]". So pay attention!
    ts: {},

    // Set options for the "css-loader". "cc-webpack" will use it for setting
    // the properties "url" (to false), "modules" and "auto" (enable css modules
    // based on filename). So pay attention!
    css: {},

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

    // Set options for the "sass-loader". "cc-webpack" will use it for setting
    // the properties "api" to "modern-compiler". If you do not overwrite this
    // you can use this without risk.
    sass: {},

  }

};

  1. From 2.5 the precedence works correctly.