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.
#
wsDir.xxxA working directory in the src
directory.
You cannot change src
.
#
wsDir.staticDefault: 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.htmlDefault: html
A working directory for HTML template engines.
#
wsDir.cssDefault: css
A working directory for CSS languages.
#
wsDir.jsDefault: js
A working directory for JavaScript preprocessors and frameworks.
#
wsDir.imgDefault: img
A place to put images when using file-loader (webpack)
.
#
wsDir.yaml2jsonDefault: yaml2json
A working directory for converting YAML files to json files.
#
outputDirDefault: dist
Build output directory.
#
deployDir.xxxOutput destinations by language.
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.cssDefault: ['common', 'css']
Output destination for CSS language.
#
deployDir.jsDefault: ['common', 'js']
Output destination for JavaScript preprocessors and frameworks.
#
deployDir.imgDefault: ['common', 'img']
Output destination when images are built using file-loader (webpack)
.ss
#
deployDir.jsonDefault: ['common', 'data']
Output destination for Yaml2Json.
#
Build optionsOptional settings for building with Webpack.
#
options.html.minifyDefault: false
#
options.pug.phpDefault: false
Output as a PHP file at build time.
e.g. index.pug
=> index.php
#
options.pug.lintDefault: '.pug-lintrc.json'
Path to Pug's Lint configuration file from the project root.
#
options.pug.vuePugLintDefault: 'config-vue/.pug-lintrc.json'
Pug's Lint configuration file path that can only be set in Vue.js components.
#
options.css.minifyDefault: false
#
options.css.postcss.mqpackerDefault: true
Using node-css-mqpacker.
#
options.css.postcss.autoprefixerDefault: undefined
Autoprefixer option.
Using autoprefixer.
If setting e.g.
#
options.js.minifyDefault: false
#
options.js.teaserDefault:
Using Terser plugin if minify is true.
#
options.js.splitFilenameDefault: 'assets'
File names that combine the same logic.
#
options.js.sourceMapDefault: false
#
options.js.eslintDefault: undefined
Path of the ESLint configuration file to check when building webpack.
If it is not set, Lint will not be executed.
#
options.js.tsconfigDefault: 'tsconfig.json'
Path of the TypeScript configuration file to check when building webpack.
#
options.json.minifyDefault: false
#
options.imageminDefault:
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 optionsSettings 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.useDefault: true
#
options.fileLoader.html.hashDefault: true
#
options.fileLoader.html.targetDefault:
See reference of html-loader#attributes.
#
options.fileLoader.css.useDefault: true
#
options.fileLoader.css.hashDefault: true
#
options.fileLoader.js.useDefault: true
#
options.fileLoader.js.hashDefault: true
#
options.fileLoader.vue.useDefault: true
#
options.fileLoader.vue.loaderDefault:
See reference of vue-loader#transformAssetUrls.
#
overrideEnvDefault: 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.