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

webpackConfigGenerator: see webpackConfigGenerator

getEntries: see makeGetEntries

all, * means all entries under src(packages if is packages mode) directory.

extended settings

packages: whether use packages mode

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

babelImport: babel-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"]

babelComponent: babel-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"]

babelExclude: babel-loader exclude

type: [] default: [/node_modules/]

babelPresets: extra babel presets

type: [] default: []

babelPlugins: extra babel plugins

type: [] default: []

extensions: url-loader file extensions

type: [] default: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'svg', 'eot', 'ttf', 'woff', 'woff2']

provide: ProvidePlugin config

type: {} default: {}

define: DefinePlugin config

type: {} default: {}

banner: BannerPlugin config

type: string default: empty string

alias: resolve-alias config

type: {} default: {}

flow: whether to use flow

type: bool default: false

flowRuntime: whether to use flow-runtime

type: bool default: false

minJs: whether minify js

type: bool default: true

minCss: whether minify css

type: bool default: true

devtool: devtool config

type: string

default:

• cmd: start: eval-source-map
• cmd: build: source-map

filename: library file name

type: string default: empty string

library: library exported global name, see output-library

type: string default: Index

externals: see externals

rules: extra webpack rules

type: [] default: []

plugins: extra webpack plugins

type: [] default: []

extra: extra webpack config options

type: {}/function default: {}

extra: { ... }
extra: webpack => ({ ... })

ext: entry script file extension, like js, jsx, vue

type: string default: js

- src/
  - index.${ext}

files of an entry

An entry has a standalone directory, also called workspace.

for build command

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

for start command

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

• babel-loader
• url-loader
• html-loader
• css-loader
• less-loader
• sass-loader

file extensions

• .js: pure javascript code
• .jsx: React component code
• .vue: Vue component code