CodeCoupler Webpack Configuration Factory Configuration
Your webpack.config.js file will call normally the CodeCoupler Webpack generator function like this:
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) => ccWebpack({}, env, {});
The first argument is the CodeCoupler Webpack configuration that you should use. This configuration allows you to adjust the dynamic generation of the Webpack configuration by defining some options.
These are the configuration options:
{
// This sets the compilation mode to "development" or "production". Unlike Webpack,
// the default value here is "development" and not "production"!
//
// Be careful that the value matches any overrides with a Webpack
// configuration or the "--mode" argument of the Webpack-CLI.
//
// This value will therefore be set automatically if a CLI argument "--mode"
// is detected.
//
// This feature is available in version 4 and later. In versions before 4,
// this could only be set via the CodeCoupler Webpack CLI flag `--mode`.
mode: String,
// This is the externals configuration used by the CodeCoupler Webpack Externals
// Plugin.
externals: Array<Object>,
// Settings in "bundle" manage the output that will be generated.
bundle: {
// Name of the bundled JavaScript file.
// Default: Package name from package.json
jsName: String,
// If this is true, a hash value will be included in the bundle file name.
// This should be disabled for libraries.
// Default: true
jsNameHashed: Boolean,
// Name of the bundled Stylesheet file.
// Default: Package name from package.json
cssName: String,
// If this is true, a hash value will be included in the bundle file name.
// This should be disabled for libraries.
// Default: true
cssNameHashed: Boolean,
// Variablename is where the exports of your library will be assigned.
// It can be an array, which leads to the a creation of objects with properties.
// Default: Package name from package.json 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.
//
// Hint:
//
// If you have defined an object tree by using an array in libraryName,
// you can use here a dor notation here to store the variable
// name inside of this object tree.
//
// Example:
// libraryName: ["myNamespace", "myLibray"],
// pathVarName: "myNamespace.myLibray.$publicPath"
//
// Default: Package name from package.json converted into camel case
// and prefixed with "pathTo"
// Example:
// Packagename: @some-scope/name-with_underscore~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 and manifest will be saved.
// Default: "manifest" (Till Version 3.2.2: "favicon")
manifestSubfolder: String,
},
// This overrides the source map generator that will be used. By default, "eval-source-map"
// is be used in "development" mode and, but is completely disabled in "production mode".
//
// Default: null (use default settings).
//
// Available from Version 4. In versions prior to 4, this could only be set via the
// CodeCoupler Webpack CLI flag, `--devtool`.
devtool: String,
// This determines whether externals are injected as links to CDN or copied to the
// "dist" directory.
cdn: {
// Selecting "true" will enable the compilation with CDN links instead of copying
// the externals to the "dist" directory.
//
// Default: false
//
// This is available from Version 4. In versions before 4 this could only be set via the
// CodeCoupler Webpack CLI flag, `--externals-cdn`.
enabled: Boolean,
// 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}"
getLink: Function
}
// Settings in "staticParser" manage the copy process from files in the "static" folder.
staticParser: {
// This is an array of relative paths to HTML files in the static folder that 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),
// This is an array of globs to filenames (relative to the static folder) that will be ignored.
// You cannot use foldernames here.
// Default: []
ignore: Array<String>,
// Specify here which loader will be used to read the HTML files. The package
// "ejs-compiled-loader" will be used by default. So you can include parts from
// other files without any additionally libraries.
//
// For example, you can use the "ejs-loader" package, which uses 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 this is "true", the tags for including the final bundle and the external JavaScript and
// the stylesheet files, will be injected into the HTML templates.
// Default: true
htmlInject: Boolean,
// It can be "blocking" or "defer". If you select "defer", the script tags will be loaded in
// the "head" with the the attribute "defer" set.
// If you use "defer", please note that your scripts will execute
// after the DOM loads. Please note the proportion of browsers that
// support the defer attribute: https://caniuse.com/script-defer
//
// Default:
// Till Version 3: 'blocking'
// From Version 4: 'defer'
scriptLoading: String,
// If this is true, the inc folder will be copied into the dist folder.
// Default: false (From Version 3.3)
keepIncSource: Boolean
},
// Settings for favicon & manifest ceration
manifest: {
// Filename or relative path of the source image for creating the favicon.
// Setting this to "null" will disable this feature.
// Default:
// Till Version 2: "logo.png"
// From Version 3: "favicon.png"
favicon: String,
// Filename or relative path of the override file for manifest creation (From Version 3.2.2).
// Setting this to "null" will disable this feature.
// Attention: Setting "favicon" to "null" will also disable this feature!
// Default:
// Till Version 3: "manifest.webmanifest"
// From Version 4: "manifest.json"
overrides: String,
},
// Banner to add into your build result.
//
// The default output of the function until version 3 was:
//
// ${PACKAGE.name} ${PACKAGE.version}
// Copyright (c) ${new Date().getFullYear()} ${PACKAGE.author}
// License: ${PACKAGE.license}
//
// Starting with version 4, the function looks for a file called BANNER. If it exists
// it will be used as the banner, replacing "Copyright (c) XXXX" with
// "Copyright (c) XXXX-YYYY" where XXXX must be digits and YYYY is the
// current year.
banner: String || Function,
// The following settings can be used to overwrite the options used for
// the plugins. 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 because their options are very specific to the process of copying
// the files from "static" to "dist".
plugins: {
// Set the options for the "clean-webpack-plugin". The "cc-webpack" does
// not use any options by itself. You can therefore use it without risk.
//
// Starting with version 4.5.1: You can set it to "false" to disable the
// plugin completely.
CleanWebpackPlugin: {} || Boolean,
// Set the options for the "webpack-bar". The "cc-webpack" does
// not use any options by itself. You can therefore use this without risk.
//
// Starting with version 4: You can set this to "false" to disable the plugin
// completely. In versions before 4, this was only possible via the
// CodeCoupler Webpack CLI flag `--quiet`.
//
// Starting with version 4.5.2: The plugin will be disabled if the environment
// variable "CI is set.
WebpackBar: {} || Boolean,
// Set the options for the "mini-css-extract-plugin". "cc-webpack" will
// use the settings from above "bundle.cssName" for "filename". So
// pay attention!
MiniCssExtractPlugin: {},
// Set the options for the "stylelint-webpack-plugin". "cc-webpack" will
// use the value "./src/**/*.css" for "files". So pay attention!
StylelintWebpackPlugin: {},
// Set the options for the "webpack-require-from". "cc-webpack" will
// use the value "true" for "suppressErrors" and thesettings from above
// "bundle.pathVarName" for "variableName". So pay attention!
WebpackRequireFrom: {},
// Set the options for the "favicons-webpack-plugin". Please note that
// this plugin will not be used if "staticParser.favicon" is set
// to "null". "cc-webpack" will use the value "force" for "inject",
// the settings from above "staticParser.favicon" for "logo" and
// the settings from above "bundle.faviconSubfolder" for "prefix".
// So pay attention!
FaviconsWebpackPlugin: {},
// Set the options for the CodeCoupler Webpack Externals Plugin. "cc-webpack"
// will use the settings from above "bundle.externalsSubfolder" for "packagesPath"
// and the settings from above "bundle.getCdnPath" for "getCdnPath".
// "useCdn" will be set according to CLI arguments. So pay attention!
CcWebpackExternalsPlugin: {},
// Set the options for the "banner-plugin". "cc-webpack" will use the settings
// from above "production.banner" for "banner". So pay
// attention!
BannerPlugin: {},
},
// The following settings can be used to expand the options used for
// the loaders. You have to use these settings very carefully because they
// could break the main features of "cc-webpack".
//
// Your settings will be deep merged with the settings of "cc-webpack".
loaders: {
// Set the options for the "vue-loader". "cc-webpack" does
// not use any options by itself. So you can use this without risk.
vue: {},
// Set the options for the "html-loader". "cc-webpack" uses it to set
// "sources: false", which can be overridden here.
html: {},
// Set the options for the "babel-loader", wich is used for TypeScript files and JavaScript
// files. The "cc-webpack" does not use any options by itself. So you can use this without
// risk.
babel_ts: {},
babel_js: {}
// Set the options for the "ts-loader". "cc-webpack" uses it to set
// "appendTsSuffixTo: [/.vue$/]". So pay attention!
ts: {},
// Set the options for the "css-loader". "cc-webpack" uses it to set
// the properties "url" (to false), "modules" and "auto" (enable css modules
// based on filename). So pay attention!
css: {},
// Set the options for the "postcss-loader". "cc-webpack" does
// not use any options by itself. You can therefore use this without risk.
postcss: {},
// Set options for the "sass-loader". "cc-webpack" uses it to set
// the properties "api" to "modern-compiler" and disable some deprecation
// warnings. If you do not overwrite this you can use this without risk.
sass: {},
// Which files are considered assets (From Version 3.5)
// Default: /(\.png|\.jpg)/
asset_test: Regex,
},
// Output Debugging Informations. This is for testing and
// debugging purposes only. Setting it to "raw" will output no color sequences.
//
// Default: false
//
// Available from Version 4. In versions before 4, this could only be set via the
// CodeCoupler Webpack CLI flag `--test`.
test: Boolean || "raw",
// Change the project path. You can start the compilation from any other path
// and point to the project root here. This is for testing and
// debugging purposes only, but it may also be useful in other scenarios.
//
// Default: process.cwd()
//
// Available from Version 4. In versions before 4, this could only be set via the
// CodeCoupler Webpack CLI flag `--cwd`.
cwd: String,
};