Build Settings

Settings related to the build settings are specified in the local.yml or local-development.yml or local-production.yml.
The initial value is set to the information you answered in the CLI dialog.

example (local.yml)
# working directory (src/xxx)
wsDir:
static: static
html: html
css: css
js: js
img: img
yaml2json: yaml2json
# build output
outputDir: dist
# directory configuration
# array is hierarchy
deployDir:
css: [common, css]
js: [common, js]
img: [common, img]
json: [common, data]
# build options
options:
html:
minify: false
pug:
# php file output
php: false
# lint configuration file
lint: '.pug-lintrc.json'
# lint configuration file for using by vue
vuePugLint: 'config-vue/.pug-lintrc.json'
css:
minify: false
postcss:
# using node-css-mqpacker for postcss
mqpacker: true
js:
minify: true
# If minify is true to enabled
terser:
parallel: true
extractComments: false
terserOptions:
compress:
drop_console: true
# file names that combine the same logic
splitFilename: assets
sourceMap: true
# The ESLint file to specify when building webpack
eslint: '.eslintrc'
# tsconfig.json which is specified at the time of webpack build
tsconfig: tsconfig.json
json:
minify: true
# file-loader settings
fileLoader:
html:
# false is not use a file-loader
use: true
# adding 6-digit hash for image path.
hash: true
target:
- tag: img
attribute: src
type: src
- tag: img
attribute: srcset
type: srcset
- tag: img
attribute: data-src
type: src
- tag: img
attribute: data-srcset
type: srcset
- tag: source
attribute: src
type: src
css:
use: true
hash: true
js:
use: true
hash: true
vue:
use: true
# vue-loader transformAssetUrls
loader:
video: [src, poster]
source: src
img: src
imagemin:
-
- gifsicle
- interlaced: true
optimizationLevel: 1
colors: 256
-
- jpegtran
- progressive: true
-
- optipng
- optimizationLevel: true
-
- svgo
-
plugins:
- removeViewBox: true
# Override process.env.NODE_ENV
overrideEnv: development

wsDir.xxx#

A working directory in the src directory.
You cannot change src.

<project>
โ”” src/ (working directory root)
โ”œ [wsDir.static]/ (file copy)
โ”œ [wsDir.html]/
โ”œ [wsDir.css]/
โ”œ [wsDir.js]/
โ”œ [wsDir.img]/ (using file-loader)
โ”” [wsDir.yaml2json]/

wsDir.static#

  • ALL

Default: static

Copy the file as is to the output destination.
If a directory exists, the entire directory is copied.

However, it does not copy files that begin with an underscore and dot prefix.

wsDir.html#

  • HTML
  • Pug

Default: html

A working directory for HTML template engines.

wsDir.css#

  • CSS
  • SASS/SCSS
  • Stylus

Default: css

A working directory for CSS languages.

wsDir.js#

  • Babel
  • TypeScript
  • Vue

Default: js

A working directory for JavaScript preprocessors and frameworks.

wsDir.img#

  • HTML
  • Pug
  • CSS
  • SASS/SCSS
  • Stylus
  • Babel
  • TypeScript
  • Vue

Default: img

A place to put images when using file-loader (webpack).

wsDir.yaml2json#

  • YAML2JSON

Default: yaml2json

A working directory for converting YAML files to json files.


outputDir#

  • ALL

Default: dist

Build output directory.


deployDir.xxx#

Output destinations by language.

<project>
โ”” [outputDir]/
โ”œ [deployDir.css]/ (from wsDir.css)
โ”œ [deployDir.js]/ (from wsDir.js)
โ”œ [deployDir.img]/ (from wsDir.img)
โ”” [deployDir.json]/ (from wsDir.yaml2json)

The output destination hierarchy is specified by an array.

e.g. dist/common/css is ['common', 'css']

However, the root of HTML and Pug is in wsDir.html.

e.g.
src/html/index.pug => dist/index.html
src/html/foo/bar.pug => dist/foo/bar.html

deployDir.css#

  • CSS
  • SASS/SCSS
  • Stylus

Default: ['common', 'css']

Output destination for CSS language.

deployDir.js#

  • Babel
  • TypeScript
  • Vue

Default: ['common', 'js']

Output destination for JavaScript preprocessors and frameworks.

deployDir.img#

  • HTML
  • Pug
  • CSS
  • SASS/SCSS
  • Stylus
  • Babel
  • TypeScript
  • Vue

Default: ['common', 'img']

Output destination when images are built using file-loader (webpack).ss

deployDir.json#

  • YAML2JSON

Default: ['common', 'data']

Output destination for Yaml2Json.


Build options#

Optional settings for building with Webpack.

options.html.minify#

  • HTML
  • Pug

Default: false

options.pug.php#

  • Pug

Default: false

Output as a PHP file at build time.
e.g. index.pug => index.php

options.pug.lint#

  • Pug

Default: '.pug-lintrc.json'

Path to Pug's Lint configuration file from the project root.

options.pug.vuePugLint#

  • Pug

Default: 'config-vue/.pug-lintrc.json'

Pug's Lint configuration file path that can only be set in Vue.js components.

options.css.minify#

  • CSS
  • SASS/SCSS
  • Stylus

Default: false

options.css.postcss.mqpacker#

  • CSS
  • SASS/SCSS
  • Stylus
  • Vue

Default: true

Using node-css-mqpacker.

options.css.postcss.autoprefixer#

v1.1.1ใ€œ
  • CSS
  • SASS/SCSS
  • Stylus
  • Vue

Default: undefined

Autoprefixer option.
Using autoprefixer.

If setting e.g.

{
"autoprefixer": {
"grid": "autoplace",
"flexbox": "no-2009"
}
}

options.js.minify#

  • Babel
  • TypeScript
  • Vue

Default: false

options.js.teaser#

  • Babel
  • TypeScript
  • Vue

Default:

{
"parallel": true,
"extractComments": false,
"terserOptions": { "compress": { "drop_console": true } }
}

Using Terser plugin if minify is true.

options.js.splitFilename#

  • Babel
  • TypeScript
  • Vue

Default: 'assets'

File names that combine the same logic.

options.js.sourceMap#

  • Babel
  • TypeScript
  • Vue

Default: false

options.js.eslint#

  • Babel
  • TypeScript
  • Vue

Default: undefined

Path of the ESLint configuration file to check when building webpack.
If it is not set, Lint will not be executed.

options.js.tsconfig#

  • TypeScript
  • Vue

Default: 'tsconfig.json'

Path of the TypeScript configuration file to check when building webpack.

options.json.minify#

  • YAML2JSON

Default: false

options.imagemin#

v1.1.1ใ€œ
  • HTML
  • Pug
  • CSS
  • SASS/SCSS
  • Stylus
  • Babel
  • TypeScript
  • Vue

Default:

[
["gifsicle", { "interlaced": true, "optimizationLevel": 1, "colors": 256 }],
["jpegtran", { "progressive": true }],
["optipng", { "optimizationLevel": 5 }],
["svgo", { "plugins": [{ "removeViewBox": true }] }]
]

Using image-minimizer-webpack-plugin.
Default built-in plugins is imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-svgo.
If you want to change it, install the plugin and set the plugin options.

If you do not use it, delete option.imagemin.


file-loader options#

Settings for using file-loader.
The use option specifies whether to use the file-loader.
The hash option specifies whether to insert a 6-digit hash value after image files for cache protection.

options.fileLoader.html.use#

  • HTML
  • Pug

Default: true

options.fileLoader.html.hash#

  • HTML
  • Pug

Default: true

options.fileLoader.html.target#

  • HTML
  • Pug

Default:

[
{ "tag": "img", "attribute": "src", "type": "src" },
{ "tag": "img", "attribute": "srcset", "type": "srcset" },
{ "tag": "img", "attribute": "data-src", "type": "src" },
{ "tag": "img", "attribute": "data-srcset", "type": "srcset" },
{ "tag": "source", "attribute": "src", "type": "src" }
]

See reference of html-loader#attributes.

options.fileLoader.css.use#

  • CSS
  • SASS/SCSS
  • Stylus
  • Vue

Default: true

options.fileLoader.css.hash#

  • CSS
  • SASS/SCSS
  • Stylus

Default: true

options.fileLoader.js.use#

  • Babel
  • TypeScript

Default: true

options.fileLoader.js.hash#

  • Babel
  • TypeScript

Default: true

options.fileLoader.vue.use#

  • Vue

Default: true

options.fileLoader.vue.loader#

  • Vue

Default:

{
"video": ["src", "poster"],
"source": "src",
"img": "src",
"image": ["xlink:href", "href"],
"use": ["xlink:href", "href"]
}

See reference of vue-loader#transformAssetUrls.


overrideEnv#

  • ALL

Default: undefined

For example, if you set NODE_ENV=foo, you can use overrideEnv: development to change the build-mode to develop because the build-mode of webpack does not have foo.