Configs:

install

yarn add @pluswerk/webpack-config --dev

package.json

{
  "scripts": {
    "build": "webpack --mode production --config node_modules/@pluswerk/webpack-config/webpack.config.js --hide-modules",
    "build:watch": "webpack --watch --mode production --config node_modules/@pluswerk/webpack-config/webpack.config.js --hide-modules",
    "build:dev": "webpack --mode development --config node_modules/@pluswerk/webpack-config/webpack.config.js --hide-modules",
    "build:dev:watch": "webpack --watch --mode development --config node_modules/@pluswerk/webpack-config/webpack.config.js --hide-modules",
    "serve": "webpack-dev-server --config node_modules/@pluswerk/webpack-config/webpack.hmr.config.js --mode development --colors --progress --inline --hide-modules"
  },
  "browserslist": [
    "last 2 versions",
    "IE 11"
  ],
  "sideEffects": true
}

build.settings.js

module.exports = {
  directory: {
    typescript: 'Typescript/',
    scss: 'Scss/',
    generated: 'Generated/',
    publicPath: 'Generated/',
  },
  entry: {
    main: ['./Typescript/index.ts', './Scss/index.scss']
  }
};

Web Root != Project Root

if your Project locks like this:

build.settings.js
Typescript/...
Scss/...
public/index.html
public/Generated/...

You must set the publicPath in your settings:

build.settings.js

module.exports = {
  directory: {
    typescript: 'Typescript/',
    scss: 'Scss/',
    generated: 'public/Generated/', //as seen from your build.settings.js
    publicPath: 'Generated/', //as seen from the Browser
  },
  entry: {
    main: ['./Typescript/index.ts', './Scss/index.scss']
  }
};

Overwrite configs:

you can overwrite tsconfig.json, tslint.json and stylelint.config.js.

• Either name the file exactly the same and put it in the root directory.
• Or you can adjust the path in build.settings.js and put the file wherever you like.

These files should extend the defaults of the package. See:

example tsconfig.json

{
  "extends": "./node_modules/@pluswerk/webpack-config/tsconfig",
  "files": [
    "pathToYourTsFiles/index.ts",
    "pathToYourTsFiles/types.d.ts",
    "pathToYourTsFiles/vue-shims.d.ts",
  ],
  "include": [
    "pathToYourTsFiles/**/*.ts",
    "pathToYourTsFiles/**/*.vue"
  ],
  "exclude": [
    "node_modules/"
  ],
  "types": [
    "node"
  ]
}

example to overwrite tslint.json

{
  "extends": "./node_modules/@pluswerk/webpack-config/tslint.json"
}

example to overwrite stylelint.config.js

module.exports = {
  extends: './node_modules/@pluswerk/webpack-config/stylelint.config.js'
}

Options of build.settings.js:

module.exports = {
  directory: {
    typescript: 'Typescript/',
    scss: 'Scss/',
    generated: 'Generated/',
    publicPath: null, // same as 'directory.generated' by default
  },
  files: {
    tsConfig: './tsconfig.json',
    tsLint: './tslint.json',
    stylelint: './stylelint.config.js',
  },
  entry: {
    main: ['./Typescript/index.ts', './Scss/index.scss']
  },
  envPath: '.env',
  serverActiveEnv: 'NODE_ACTIVE=TRUE',
  serverInactiveEnv: 'NODE_ACTIVE=FALSE',
  // more info on definePlugin: https://webpack.js.org/plugins/define-plugin/
  definePlugin: {
    BOOLEAN_ENV: !!process.env.BOOLEAN_ENV,
    STRING_ENV: JSON.stringify(process.env.STRING_ENV),
  },
  webpackConfig: {},
}

!!! TIP: you can overwrite all the webpackConfig parameters within build.settings.js

Example .vue file

Component.vue

<!-- currently it is not possible to use inline Typescript files. -->
<script lang="ts" src="./Component.ts"></script>

<template>
  <div class="background--red">
    Green
  </div>
</template>

<!-- to bundle vue's css into js and not bundle "normal" css, it is required to set the lang to vue-scss -->
<style lang="vue-scss" type="text/scss" scoped>
  .background--red { 
    background: red;
  }
</style>

Component.ts

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  props: {
    value: Array,
  },
})
export default class FilterMultiSelect extends Vue {
  get internalValue() {
    return this.$props.value.filter(el => !!el);
  }
}

TODO:

• dosn't lint scss inside vue
• sideEffects:true https://github.com/vuejs/vuepress/issues/718