install
yarn add @pluswerk/webpack-config --devpackage.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']
}
};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']
}
};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'
}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
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);
}
}- dosn't lint scss inside vue
sideEffects:truevuejs/vuepress#718