配置
说明
从 v2.0 版本起来,主要是通过项目路径下的 legoflow.json
/ legolfow.yaml
/ legoflow.js
作为配置文件,默认使用 legoflow.yaml
。
公共参数
name
项目名称,e.g.
name: test
version
创建项目使用的 LegoFlow 客户端或 CLI 版本号,e.g.
version: app@2.0.0
type
创建的项目类型,e.g.
type: vue
REM
是否使用 REM 适配。启动该选项后,_img.scss 会以 REM 为单位,e.g.
REM: true
ES.Next
是否对 JS 进行 ES.Next 语法的编译,默认值为 true, e.g.
ES.Next: true
alias
Webpack 别名配置,参考文档,e.g.
alias:
axios: ./node_modules/axios
jquery: ./src/assets/jquery.min.js
global
Webpack 全局对象,参考文档,e.g.
global:
$: jquery
jquery: jquery
jQuery: jquery
externals
Webpack externals,参考文档,e.g.
externals:
vue: Vue
includeModules
Webpack modules,默认已加入项目路径下的 node_modules
,参考文档,e.g.
includeModules:
- ./test_node_modules
ESLint
是否启动 ESLint,启动后若项目下没有 ESLint 配置文件 的话,JS 部分默认会以 Standard 作为规范,vue 文件部分会以 plugin:vue/essential。e.g.
ESLint: true
默认配置:
module.exports = {
"parserOptions": {
"parser": "babel-eslint"
},
"extends": [
"standard",
"plugin:vue/essential"
],
"plugins": [
"vue"
]
}
env
配置各种环境不一样的参数,e.g.
env:
dev-test:
alias:
axios: ./src/assets/axios.min.js
preview:
workflow.build:
html.resourcesDomain: https://preview.com
test:
workflow.build:
html.resourcesDomain: https://test.com
production:
workflow.build:
html.resourcesDomain: https://production.com
entry
一般情况下,webapck entry 是通过 内置策略 自动获取的,但你也可以通过该属性进行指定。e.g.
entry:
- ./src/main.ts
- ./src/test.js
# 或者
entry:
main: ./src/main.ts
test: ./src/test.js
mode
设置 Engine 模式。e.g.
mode: webpack
webpack
当设置 Engine 模式 为 webpack
的时候,以下属性生效,主要用来设置一些 Webpack 插件的配置。
以下参数请配置在 webpack
内使用,e.g.
webpack:
imageQuality: 70
imageQuality
构建工作流,处理图片资源时,会进行图片压缩处理质量,默认为 90,e.g.
imageQuality: 70
build.sourceMap
构建工作流,同时生成 Source Map 文件,默认为 false,e.g.
build.sourceMap: true
VueChunkStyle
禁止 异步 vue 文件内的 Style 单独打包出样式文件,默认为 true,e.g.
VueChunkStyle: false
include
默认 Webpack loader 对文件的处理都 exclude 排除 node_modules 路径下的模块,而通过该属性可以指定一些模块加入 loader 的处理,例如:ESNext 语法编译等等,e.g.
include:
esnext:
- ./node_modules/sdk
vue:
- ./node_modules/alert
dll
dll 设置, 可通过命令行工具 cli,执行 lf build:dll
生成 dll 文件,e.g.
dll:
vendor1:
- vue
- vue-router
- vuex
html
设置 html-webpack-plugin 插件配置,e.g.
html:
- template: ./src/html/index.html
filename: index.html
excludeChunks:
- test
- template: ./src/html/test.html
filename: test.html
excludeChunks:
- main
babelModules
设置 babel env 转换模块规范 (详细), 默认值为 commonjs
, e.g.
babelModules: false
uglifyOptions
设置 uglifyoptions 配置项 (详细),e.g.
uglifyOptions:
keep_fnames: true
dev.https (v2.4.0+)
是否启动 https 模式,e.g.
https: true
build.htmlInject (v2.4.0+)
通过该配置注入 JS / CSS 静态资源,e.g.
build.htmlInject:
a: 'https://a.com/a.css'
b: 'https://b.com/b.js',
/* https://a.com/a.css */
html { background: red }
// https://b.com/b.js
console.log('b')
构建前
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- @inject/link: a -->
<!-- @inject/link: b -->
<!-- @inject/inline: a -->
<!-- @inject/inline: b -->
</body>
</html>
构建后
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link rel="stylesheet" href="https://a.com/a.css">
<script src="https://b.com/b.js"></script>
<style type="text/css">html { background: red }</style>
<script>console.log('b')</script>
</body>
</html>
build.copy (v2.4.0+)
通过该配置在构建后复制文件或文件夹,e.g.
build.copy:
a.png: b.png
assets: assets
构建后,./src/a.png
复制到 ./dist/b.png
,./src/assets
复制到 ./dist/assets
bundle.worker (v2.5.0+)
通过该配置可开启打包 WebWorker 文件进依赖链,e.g.
bundle.worker: true
new Worker('./worker.js', { type: 'module' })
开发工作流参数
以下参数配置在 workflow.dev
内,e.g.
workflow.dev:
env: dev-test
hot.reload
代码热更新,e.g.
hot.reload: true
watch.reload
监听额外的文件夹,变动刷新浏览器,e.g.
watch.reload:
- ./src/test/**/*
user.args
用户参数,根据用户名注入 Webpack define 插件变量, e.g.
# * 全部用户在 JS 文件中变量 process.args.token4Common 编译为 abc
# 用户为 test1,在 JS 文件中变量 process.args.token4User 编译为 123
# 用户为 test2,在 JS 文件中变量 process.args.token4User 编译为 321
user.args:
*:
token4Common: abc
test1:
token4User: 123
test2:
token4User: 321
env
开发工作流指向的环境参数,e.g.
env: dev-test
proxy
Webpack 代理,参考文档,e.g.
proxy:
/api:
target: http://xxx.com
changeOrigin: true
shell
需要执行的 shell 脚本文件,e.g.
shell: ./shell/dev.js
onlyRunShell
否仅仅执行 Shell 脚本文件,e.g.
onlyRunShell: true
构建工作流参数
以下参数配置在 workflow.build
内,e.g.
workflow.build:
env: preview
publicPath
Webpack output.publicPath 配置,参考文档,e.g.
publicPath: https://legoflow.com
html.resourcesDomain
类型于 1.x 版本 assets
,构建时候对 html 文件引入的资源加入主域,e.g.
# 例如:<script src="./js/main.js"></script>
# 输出:<script src="https://legox.org/js/main.js"></script>
html.resourcesDomain: https://legox.org
css.resourcesDomain
类型于 1.x 版本 assets.css
,构建时候对 css 文件引入的资源加入主域,e.g.
# 例如:background-image: ( ../img/icon.png )
# 输出:background-image: ( https://legox.org/img/icon.png )
css.resourcesDomain: https://legox.org
cache
对资源生成 哈希值 (hash
) / 时间戳 (timestamp
) / 版本号 (version
) / 无 ( ''
),e.g.
# 哈希值:<script src="./js/main.js?h=aslm28u12mk2"></script>
# 时间戳:<script src="./js/main.js?t=1523518772795"></script>
# 版本号:<script src="./js/main.js?v=0.0.1"></script>
# 无:<script src="./js/main.js"></script>
cache: version
user.args
同理开发工作流 user.args
参数,e.g.
user.args:
*:
token4Common: abc
test1:
token4User: 123
test2:
token4User: 321
env
构建工作流指向的环境参数,e.g.
env: preview
shell
需要执行的 shell 脚本文件,e.g.
shell: ./shell/build.js
onlyRunShell
否仅仅执行 Shell 脚本文件,e.g.
onlyRunShell: true
output.webpackStats
是否构建出 webpack stats.json,有助于分析模块打包占比,e.g.
output.webpackStats: true
分析网站:webpack analyse、webpack chart
noUglifyJs
构建出来的 JS 文件,是否不需要混淆,e.g.
noUglifyJs: true
Schema
{
name: String,
version: String,
type: String,
REM: Boolean,
'ES.Next': Boolean,
ESLint: Boolean,
alias: Object,
global: Object,
externals: Object,
env: Object,
includeModules: Array,
mode: String,
friendlyErrors: Boolean,
webpack: {
imageQuality: Number,
html: Object,
dll: Array,
include: {
esnext: Array,
vue: Array
},
babelModules: String,
uglifyOptions: Object,
VueChunkStyle: Boolean,
'sass.globalResources': Array,
'dev.https': Boolean,
'build.sourceMap': Boolean,
'build.html.inject': Object,
'build.copy': Object
},
'workflow.dev': {
env: String,
'hot.reload': Boolean,
'watch.reload': Array,
'user.args': Object,
proxy: Object,
shell: String,
onlyRunShell: Boolean
},
'workflow.build': {
publicPath: String,
'html.resourcesDomain': String,
'css.resourcesDomain': String,
'bundle.limitResourcesSize': Number,
cache: String,
'user.args': String,
env: String,
shell: String,
onlyRunShell: Boolean,
'output.webpackStats': Boolean
}
}