README
lila-webpack-lib-config
Built-in webpack config generator for lila-webpack-lib
.
install
npm install --save-dev lila-webpack-lib-config
use
In lila.js
:
import webpackPlugin from 'lila-webpack-lib';
import webpackConfigPlugin, {forReact, forVue} from 'lila-webpack-lib-config';
export default lila => {
webpackPlugin(lila);
webpackConfigPlugin(lila); // for normal project
// forReact(lila); // for react project
// forVue(lila); // for vue project
...
};
implemented settings of lila-webpack-lib
: see webpackConfigGeneratorwebpackConfigGenerator
: see getEntriesmakeGetEntries
all, *
means all entries under src
(packages
if is packages mode) directory.
extended settings
: whether use packages mode packages
type: bool/string
default: false
If you want packages mode(see lerna), you can configure lila.setSetting('packages', true)
.
If so, building structure will be as follows:
- / root
- packages/ packages directory
- pkg1/ package 1
- src/
- build/
- pkg2/ package 2
- src/
- build/
If you want to customize packages' directory, you can configure lila.setSetting('packages', 'yourCustomDirectory')
.
extended configs
: babelImportbabel-plugin-import config
type: []/{}
default: []
example:
{ "libraryName": "antd" }
=>
["import", { "libraryName": "antd" }]
[[{ "libraryName": "antd"}, "ant"]]
=>
["import", { "libraryName": "antd"}, "ant"],
[{ "libraryName": "antd"}, { "libraryName": "antd-mobile"}]
=>
["import", { "libraryName": "antd"}]
["import", { "libraryName": "antd-mobile"}]
[
[{ "libraryName": "antd"}, "ant"],
[{ "libraryName": "antd-mobile"}, "antd-mobile"]
]
=>
["import", { "libraryName": "antd"}, "ant"]
["import", { "libraryName": "antd-mobile"}, "antd-mobile"]
: babelComponentbabel-plugin-component config
type: []/{}
default: []
example:
{ "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }
=>
["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }]
[[{ "libraryName": "element-ui" }, "element-ui"]]
=>
["component", { "libraryName": "element-ui"}, "element-ui"],
[{ "libraryName": "element-ui"}, { "libraryName": "mint-ui"}]
=>
["component", { "libraryName": "element-ui"}]
["component", { "libraryName": "mint-ui"}]
[
[{ "libraryName": "element-ui"}, "element-ui"],
[{ "libraryName": "mint-ui"}, "mint-ui"]
]
=>
["component", { "libraryName": "element-ui"}, "element-ui"]
["component", { "libraryName": "mint-ui"}, "mint-ui"]
: babelExcludebabel-loader exclude
type: []
default: [/node_modules/]
: extra babel presets babelPresets
type: []
default: []
: extra babel plugins babelPlugins
type: []
default: []
: extensionsurl-loader file extensions
type: []
default: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'svg', 'eot', 'ttf', 'woff', 'woff2']
: provideProvidePlugin config
type: {}
default: {}
: defineDefinePlugin config
type: {}
default: {}
: bannerBannerPlugin config
type: string
default: empty string
: aliasresolve-alias config
type: {}
default: {}
: whether to use flowflow
type: bool
default: false
: whether to use flowRuntimeflow-runtime
type: bool
default: false
: whether minify js minJs
type: bool
default: true
: whether minify css minCss
type: bool
default: true
: devtooldevtool config
type: string
default:
cmd: start
:eval-source-map
cmd: build
:source-map
: library file name filename
type: string
default: empty string
: library exported global name, see libraryoutput-library
type: string
default: Index
: see externalsexternals
: extra webpack rules rules
type: []
default: []
: extra webpack plugins plugins
type: []
default: []
: extra webpack config options extra
type: {}/function
default: {}
extra: { ... }
extra: webpack => ({ ... })
: entry script file extension, like extjs, jsx, vue
type: string
default: js
- src/
- index.${ext}
files of an entry
An entry has a standalone directory, also called workspace.
build
command
for For build
command, an entry has at least a index.js
file.
If entry
is not provided, @lila/index
will be used as default.
If entry is @lila/index
, its workspace is src
:
- src/
- index.js
- other files and directories
Others(if entry is main
), its workspace is src/main
:
- src/
- main/
- index.js
- other files and directories
start
command
for For start
command, an entry has at least a index.html
file and a index.js
file.
If entry is example
, its workspace is example
:
- src/
- example/
- index.html
- index.js
- other files and directories
built-in rules
file extensions
.js
: pure javascript code.jsx
: React component code.vue
: Vue component code