README
lila-webpack
Wrapped webpack plugin.
install
npm install --save-dev lila-webpack
use
In lila.init.js
:
import webpackPlugin from 'lila-webpack';
export default lila => {
webpackPlugin(lila);
...
};
extended commands
: start a local server to develop an entry dev
lila dev entry
If entry
is not provided, @lila/index
will be used as default.
: simulate a backend environment to start a local server to develop an entry serve
lila serve entry
If entry
is not provided, @lila/index
will be used as default.
Need servePath
setting to work with.
: pack source codes to production bundles build
lila build entry1 entry2 entry3 ...
If entry
is not provided, @lila/index
will be used as default.
: make production bundles, then sync to remote servers sync
lila sync entry1 entry2 entry3 ...
If entry
is not provided, @lila/index
will be used as default.
: make production bundles, then start a local server to preview start
lila start entry
If entry
is not provided, @lila/index
will be used as default.
: visualize size of webpack output files analyze
lila analyze entry
If entry
is not provided, @lila/index
will be used as default.
extended tasks
: run webpack @lila/webpack
'@lila/webpack'
settings need to be implemented
: generate webpack config webpackConfigGenerator
webpack => ({entry, argv, cmd, config, lila}) => config
settings can be implemented
: get all entries under a dir getEntries
(dirPath, srcPath, root) => entries
: get serve js file path for command servePathserve
(relative to root
)
(entry, srcDir) => path
Note:
- to enable this feature, you need to set
devMiddleware.writeToDisk
totrue
in config file html
file may be generated after browser opening the dev page, so the first time you may see an error page, and then reload the page can be ok.
serve js file
export default (content, req) => newContent;
content
: html file contentreq
: Node HttpnewContent
: new html content
: when use a special mode to build entries, such as excludeEntrieshome/*
, sometimes you may not want to build some entries under home
(home/test, home/ui
, just for local development), you can exclude them here.
type: string/RegExp/[string]/[RegExp]/function
example:
excludeEntries: 'home/test' // exclude home/test entry
excludeEntries: /\/test$/ // exclude */test entries
// exclude home/exclude, */test, */ui entries
excludeEntries: ['home/exclude', /\/test$/, /\/ui$/]
// if return true, entry will be excluded
excludeEntries: entry => true
: entry script file extension to search when get all entries under a dir, like extToSearchjs, jsx, ts, tsx
type: string
default: js
: pre handling before each command starting beforeCommand
({cmd, argv, lila}) => { ... }
If you want to make some pre handling, you can do it here, like:
- use chokidar to watch files' changes, and generate js files dynamically
- do some initializations or print some messages
extended configs
: force all ajax methods as forceGetget
type: bool
default: false
Normally, only get
method can access static file, and post, put, delete ...
will cause 404
.
: use js files to generate mock data mock
type: bool
default: true
In most occasions, you can use json
files to provide mock data, but when we want dynamic data, json
files won't work.
url
: /src/api/user/profile?id=1
First try /src/api/user/profile.js
:
// export a function
export default (req, res) => {
// do everything you want
};
// or export an object, a string
export default {
success: true,
message: 'ok',
data: { ... },
};
Second try /src/api/user.js
:
// export a function
export const profile = (req, res) => {
// do everything you want
};
// or export an object, a string
export const profile = {
success: true,
message: 'ok',
data: { ... },
}
req, res
refers to Node Http, and file name should not contain .
character, or it will be treated as a static file.
Support dynamic url
since: v0.8.2
If you need dynamic url, like /article/{{articleId}}/comment/{{commentId}}
(/article/1234/comment/5678
), you can use $d
to replace dynamic ones.
For example, you can make /article/$d/comment/$d.js
to proxy all urls.
Only starts with number(0-9), will be treated as dynamic url. So, /article/abc
and /article/a123
are not dynamic urls.
: extra mock root url prefix(relative to mockRootroot
)
type: string/function
When use mock data, maybe you don't like url to be that long, such as use /src/one/page/mock/list
to access /src/one/page/mock/list.js
file.
Lila internally provide a convenient way to do that.
If url
try to get a mock data from /src/one/page/mock/list.js
file, lila will try urls in sequences as follows:
${url}
: try itself/src/one/page/mock/list
/mock/${url}
: trymock
prefix/${srcDir}/${url}
: try under src directory, you can use/one/page/mock/list
/${srcDir}/mock/${url}
: trymock
prefix src directory/${srcDir}/${entry}/${url}
: try under entry's workspace, you can use/mock/list
/${srcDir}/${entry}/mock/${url}
: trymock
prefix under entry's workspace, you can use/list
If you want more convenient ways, you can add your own ways by mockRoot
.
// a string
mockRoot: '/some/directory'
// strings
mockRoot: ['/first/directory', '/second/directory']
// return a string
mockRoot: (entry, lila) => '/some/directory';
// return strings
mockRoot: (entry, lila) => ['/first/directory', '/second/directory']
: local server port port
type: number
default: 8090
: browserSyncbrowser-sync config
type: {}
default: {}
: devMiddlewarewebpack-dev-middleware config
type: {}
default: { watchOptions: { ignored: /node_modules/ } }
: hotMiddlewarewebpack-hot-middleware config
type: {}
default: {}
: bundleAnalyzerwebpack-bundle-analyzer config
type: {}
default: { analyzerPort: 8190 }
entry specification
home/about
: a single entryhome/*
orhome/all
: all entries underhome
directory*
orall
: all entries of project
npm packages
- webpack: 4.x