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

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"]
}

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 2 to 3

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 my 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 3.2.2

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