Skip to content

CodeCoupler Webpack Setup

CodeCoupler Webpack uses ESLint and Prettier to lint and fix JavaScript, Vue, and TypeScript files, and stylelint to lint stylesheet files. The boilerplate generates the necessary configuration files to lint these files, as well as Markdown files, on save with markdownlint.

To make this work you have to install the following extensions:

If you are developing with Vue you should also install:

Also recommended, but not mandatory

  • A minimal configuration for linting Markdown files is included, which uses the following extension:

    markdownlint

  • Installing this extension will automatically wrap comments and Markdown code. It also allows you to manually rewrap your comments to the rulers configured by the boilerplate (80, 100, 120):

    Rewrap

  • The Markdownlint extension does not format tables. This extension can close this gap:

    Markdown Table

Initialize a new Project with Boilerplate

Create a new directory and initialize a Git repository. This is useful because the next commands will install Git hooks:

mkdir new-project-folder
cd new-project-folder
git init -b main

Initialize the boilerplate and install the packages. Always use the "latest" tag, otherwise you will use the last version you downloaded:

npm init @codecoupler/cc-webpack@latest
npm i

Initialize without Boilerplate

Change to your project directory and install it as development dependency:

npm i @codecoupler/cc-webpack --save-dev

If you do not have an ESLint configuration you have to create one:

./node_modules/.bin/eslint --init

Change your webpack.config.js 2:

From
module.exports = {
  // Webpack Configuration
};
To
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      // CodeCoupler Webpack Configuration
    },
    env,
    {
      // Webpack Configuration
    }
  );

  1. Up to version 2.1, the package @codecoupler/create-cc-webpack was optimized for use with Vetur. Starting with version 2.2, it is optimized for Volar. ↩

  2. These instructions are only valid for version 4 and higher. For earlier versions, you must use the CodeCoupler Webpack CLI and separate configuration files. ↩