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.

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.