Skip to content

CodeCoupler Webpack Update Notes

To Update you have to compare in generally the files in the integrated boilerplate in create-cc-webpack. If you did not specific modifications to the boilerplate files you can in most of all cases just take the changes over. Here are some notes for updates which you have to manually take some more steps.

Update from 4.6

Changes in Boilerplate files:

  • The file .babelrc was renamed to babel.config.json
  • In .eslintrcthe property ignorePatterns was changed from ["dist/*", "node_modules/"] to ["dist/", "node_modules/"]

Optimized Babel Configuration (Removed Plugins, Fix for newer Core-JS- Versions etc):

babel.config.json
 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
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": "3.41", "proposals": true }
      }
    ]
  ],
  "sourceType": "unambiguous",
  "ignore": [
    "node_modules/css-loader",
    "node_modules/core-js",
    "node_modules/webpack"
  ],
  "env": {
    "production": {
        "plugins": [
            ["strip-function-call", {
                "strip": ["console.debug"]
            }]
        ]
    }
  }
}

Update from 4.4

The library @codecoupler/cc-webpack-externals-plugin was upgraded and the default value for the injection variable name of the externals path information was changed from window.ccExternals to window.externalsPath.

Update from 4.3

The default bundlename (js and css), libraryname and path-variablename of scoped packages will change! Till version 4.3 only the part behind the slash will be used to create a default bundlename. From version 4.4 the scope name will be included.

If you are only developing a site (not a library), you can forget about making these changes. Just check whether you have adjusted these configurations in any way.

Example:

Package name: @my-scope-name/the-package-name

Configuration Till 4.3 After 4.3
jsName the-package-name my-scope-name-the-package-name
cssName the-package-name my-scope-name-the-package-name
libraryName thePackageName myScopeNameThePackageName
pathVarName pathToThePackageName pathToMyScopeNameThePackageName

Update from 4.2

The package vue is not included as a dependency anymore. Using Vue SFC you must install vue with:

npm i vue

Changes of .vscode/.prettierrc (Markdown Configuration removed):

From:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "printWidth": 80,
  "trailingComma": "none",
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "printWidth": 100,
        "proseWrap": "always"
      }
    },
    {
      "files": ["*.html", "*.vue"],
      "options": {
        "printWidth": 120
      }
    }
  ]
}

To:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "printWidth": 80,
  "trailingComma": "none",
  "overrides": [
    {
      "files": ["*.html", "*.vue"],
      "options": {
        "printWidth": 120
      }
    }
  ]
}

Update from 4.1

Changes of .vscode/settings.json:

Added:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "[javascript][vue][typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css][scss][less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  "markdowntable.formatOnSave": true,
  "rewrap.autoWrap.enabled": true,
}

Removed:

1
2
3
{
  "tslint.enable": false
}

Files removed:

  • shims-vue.d.ts

Update from 4.0

The file .eslintignore should be removed and the following property should be added to the .eslintrc:

1
2
3
{
  "ignorePatterns": ["dist/*", "node_modules/"]
}

Updating from 3 to 4

Single Configuration File

In versions before you have to use the CodeCoupler Webpack CLI and use the separate configuration files webpack.cc-config.js and webpack.externals.js. These files are not needed anymore and the CLI is deprecated. Merge instead all your configurations into the file webpack.config.js:

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    // CodeCoupler Webpack Configuration
    {
      // CodeCoupler Webpack Externals Plugin Configuration
      externals: [],
    },
    env,
    // Webpack Configuration
    {}
  );

The old configuration reference was archived here.

Deprecated CLI

In Version before 4 you have to use the provided binary cc-webpack to merge all configurations and start the compilation. This is deprecated. You can now use the standard Webpack CLI.

If you have used the boilerplate to inizialize the project you should update the following scripts in package.json.

From:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "scripts": {
    "test:cc-webpack": "cc-webpack --test --mode production",
    "test:cc-webpack:dev": "cc-webpack --test",
    "build": "cc-webpack --mode production",
    "build:watch": "cc-webpack --watch --mode production",
    "build:cdn": "cc-webpack --externals-cdn --mode production",
    "build:watch:cdn": "cc-webpack --watch --externals-cdn --mode production",
    "build:dev": "cc-webpack --mode development",
    "build:dev:cdn": "cc-webpack --externals-cdn --mode development",
    "watch": "cc-webpack --watch --mode development",
    "watch:cdn": "cc-webpack --watch --externals-cdn --mode development",
    "start": "cc-webpack --devserver --mode development",
    "start:cdn": "cc-webpack --devserver --externals-cdn --mode development"
  }
}

To:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "scripts": {
    "test:cc-webpack": "webpack --env test=raw --env plugins.WebpackBar=false --mode production",
    "test:cc-webpack:dev": "webpack --env test=raw --env plugins.WebpackBar=false --mode development",
    "analyze": "webpack --analyze --mode development",
    "build": "webpack --mode production",
    "build:watch": "webpack watch --mode production",
    "build:cdn": "webpack --env cdn.enabled --mode production",
    "build:watch:cdn": "webpack watch --env cdn.enabled --mode production",
    "build:dev": "webpack --mode development",
    "build:dev:cdn": "webpack --env cdn.enabled --mode development",
    "watch": "webpack watch --mode development",
    "watch:cdn": "webpack watch --env cdn.enabled --mode development",
    "start": "webpack serve --mode development",
    "start:cdn": "webpack serve --env cdn.enabled --mode development"
  }
}

The old command reference was archived here.

Manifest & Favicon

The manifest configuration file favicon.png and manifest.webmanifest now have to be in its own subfolder manifest instead of static. Furthermore the filename manifest.webmanifest have to be changed into manifest.json.

Config Changes

The following configurations was removed:

  • staticParser.keepManifestSource
  • staticParser.keepFaviconSource

The following configuration was renamed:

  • staticParser.favicon => manifest.favicon
  • staticParser.manifest => manifest.overrides
  • bundle.faviconSubfolder => bundle.manifestSubfolder
  • production.banner => banner
  • bundle.assetsTest => loaders.asset_test
  • bundle.getCdnPath => cdn.getLink

Changed Defaults

Keep in mind that starting with version 4 the injected script tags into the static HTML files for the bundle files will not be at the end of the body anymore. Instead they are included in the head with the attribute defer. See https://caniuse.com/script-defer if you can use this. Otherwise change this behaviour back to blocking injections in the configuration.

Updating PostCSS Configuration (Please use fixed Version 4.0.1)

Please change the .postcssrc file from:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "plugins": {
    "postcss-import": {},
    "postcss-preset-env": {
      "stage": 0
    },
    "autoprefixer": {},
    "cssnano": {}
  }
}

To:

1
2
3
4
5
6
7
{
  "plugins": {
    "postcss-preset-env": {
      "stage": 0
    }
  }
}

Update Stylelint Configuration

Insert into JSON of .stylelintrc:

1
2
3
{
  "ignoreFiles": ["dist/**", "node_modules/**"]
}

Update

Update your libraries:

1
2
3
4
5
npm update
# Downgrade because 16.13.2 throws an error
npm i stylelint@16.12
# Remove from your package.json (installed package will stay)
npm remove stylelint@16.12

Updating from 3.7

The default settings for includeExternals and includeCcExternals of the CodeCoupler Webpack Externals Plugin have changed from true to false. Keep this in mind. If you want to include externals configurations from a package set the property includeExternals of a module configuration to true. If you want to use externals configurations instaled via the @cc-externals packages, set the plugin option includeCcExternals to true.

Updating from 3.2.2

The default value of the configuration staticParser.keeFaviconSource was changed from true to false.

Updating from 2 to 3

Husky has been updated from version 6 to version 9, which means that you should execute the following command to update the hooks npx husky.

The default filename for the source file of favicons generation is now favicon.png and not logo.png.

Importing an HTML file will import every loadable attribute (for example - <img src="image.png">). You may need to specify loaders in your configuration. For jpg and png the default asset loader will be used. You can extend the list of extensions that should be used by the default asset loader.

These major version upgrades may break your build:

Library From Version To Version
eslint 7 8
@typescript-eslint/eslint-plugin 4 7
@typescript-eslint/parser 4 7
babel-loader 8 9
clean-webpack-plugin 3 4
copy-webpack-plugin 8 12
css-loader 5 7
cssnano 5 6
favicons 6 7
favicons-webpack-plugin 5 6
html-loader 2 5
husky 6 9
lint-staged 10 15
mini-css-extract-plugin 1 2
postcss-import 14 16
postcss-loader 5 8
postcss-preset-env 6 9
prettier 2 3
stylelint 13 16
stylelint-config-standard 22 36
stylelint-prettier 1 5
stylelint-webpack-plugin 2 5
typescript 4 5
vue-loader 16 17
webpack-cli 4 5
webpack-dev-server 3 5
webpackbar 5 6
yargs 16 17
eslint-webpack-plugin 2 4
eslint-plugin-vue 7 9
eslint-plugin-prettier 3 5
eslint-config-prettier 8 9

Notes:

  • eslint cannot be updated to 9, because of @typescript-eslint/eslint-plugin
  • slash cannot be updated because v4+ use ES modules instead CJS modules.

Updating from 2.4

  • Till 2.4 all loaders exclude the path /node_modules/. From 2.5 this will not be done anymore. If you need to exclude the node modules directory you can set this in the webpack.cc-config.js configuration:
1
2
3
4
5
6
7
8
module.exports = {
  loaders: {
    //Exclude all css files from node modules directory
    css: {
      exclude: /node_modules/,
    },
  },
};
  • The file webpack.config.js take now precedence. In previous versions the calculated configuration was the leading configuration.

Updating from 1 to 2

The following main libraries have been upgraded:

  • Webpack from 4 to 5
  • Vue from 4 to 3

Husky has been updated from version 4 to version 6, which means that the following adjustments have to be made:

  • Create a directory .husky.
  • Put in there a file named pre-commit and with the following line:
1
npx lint-staged
  • Execute the command npx husky install
  • Add to the section scripts of the package.json:
1
2
3
4
5
{
  "scripts": {
    "prepare": "husky"
  }
}

Remove the following lines in the package.json:

1
2
3
4
5
6
7
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Updating from 1.5

Starting with the version 2 all the libraries have been extensively updated to work with Webpack 5. Furthermore Vue was switched from 2 to 3. Especially in the case of the Vue update you have to migrate your Vue applications to the new version.

The Versions 1.5.x are the last versions that uses Webpack 4 and Vue 2. The last known stable version is 1.5.11. This version do not include linting of .vue files. The following versions 1.5.12 to 1.5.14 tried to include new eslint versions, plugins and loaders but some parts of the tool chain seems to be broken. At this time the branch 1.5.x will not be fixed anymore. If you really need Webpack 4 and Vue 2 you should use the version 1.5.11.

Updating from 1.4

  • Please note that the versions before 1.5 used all the *.js and *.ts files as entry points. From now only the file index.js will be used.

  • Add the following .babelrc, modify .eslintrc and modify webpack.cc-config.js to retain functionalities like striping out console.debug or to use experimental features (stage 3) like public and private field declarations in classes or decorators. In the versions before 1.5 this configuration was build dynamically and experimental features could only be used in TypeScript. Now it is outsourced in this configuration file:

.babelrc

 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
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ]
  ],
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ],
  "env": {
    "production": {
        "plugins": [
            ["strip-function-call", {
                "strip": ["console.debug"]
            }]
        ]
    }
  }
}

.eslintrc

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "parser": "@babel/eslint-parser", //Add this
  "parserOptions": {
    "requireConfigFile": false //Add this
  },
  "plugins": ["babel", "prettier"], //Add "babel" here
  "rules": {
    "prettier/prettier": "error",
    "no-dupe-class-members": "off" //Add this
  },
}

webpack.cc-config.js

Remove the option { production: { stripFunctions: ["..."] } } and put the functions to be striped out into the .babelrc file.

Updating from 1.3

  • Remove the following entry from webpack.externals.js because vue.js will be already externalized by default:
1
2
3
4
5
{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.min.js"]
}