CodeCoupler Webpack Configuration Reference
Your webpack.config.js will call normaly 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 should be used. In this configuration you can define some options to adjust the dynamic generation of the Webpack configuration.
These are the configuration options:
{
// Sets the compilation mode to "development" or "production". Unlike Webpack,
// the default value here is "development" and not "production"!
//
// Care must be taken that the value matches any overrides with a Webpack
// configuration or the "--mode" argument of the Webpack-CLI.
//
// Therefore this value will be set automatically if an CLI argument "--mode"
// was detected.
//
// Available from Version 4. In versions before 4 this was set only via the
// CodeCoupler Webpack CLI flag `--mode`.
mode: String,
// Externals configuration which is 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 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
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.
// Can be an array which leads to 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 in libraryName
// an array, you can use here a dor notation 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,
},
// Overrides the source map generator that will be used. By default "eval-source-map"
// will be used in "development" mode and completely disabled in "production mode".
//
// Default: null (use default settings).
//
// Available from Version 4. In versions before 4 this was set only via the
// CodeCoupler Webpack CLI flag `--devtool`.
devtool: String,
// Determines whether externals are injected as links to CDN or copied to the
// "dist" directory.
cdn: {
// With "true" will enable the compilation with CDN links instead of copying
// the externals to the "dist" directory.
//
// Default: false
//
// Available from Version 4. In versions before 4 this was set only 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: {
// 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:
// Till Version 3: 'blocking'
// From Version 4: 'defer'
scriptLoading: String,
// If 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 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,
// 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:
// 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 till version 3 was:
//
// ${PACKAGE.name} ${PACKAGE.version}
// Copyright (c) ${new Date().getFullYear()} ${PACKAGE.author}
// License: ${PACKAGE.license}
//
// From version 4 the function looks for a file 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. 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.
//
// From version 4.5.1: You can set this to "false" to disable the
// plugin completely.
CleanWebpackPlugin: {} || Boolean,
// Set options for the "webpack-bar". "cc-webpack" do
// not use any options byself. So you can use this without risk.
//
// From 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`.
//
// From version 4.5.2: The plugin will be disabled if the environment
// variable "CI is set.
WebpackBar: {} || Boolean,
// 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".
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" 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 actually only for testing and
// debugging purposes. Setting to "raw" will output no color sequences.
//
// Default: false
//
// Available from Version 4. In versions before 4 this was set only 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 here to the project root. This is actually only for testing and
// debugging purposes, but may also be useful for other scenarios.
//
// Default: process.cwd()
//
// Available from Version 4. In versions before 4 this was set only via the
// CodeCoupler Webpack CLI flag `--cwd`.
cwd: String,
};