README
lila-webpack-config
Built-in webpack config generator for lila-webpack
.
install
npm install --save-dev lila-webpack-config
use
In lila.init.js
:
import webpackPlugin from 'lila-webpack';
import webpackConfigPlugin, {
forReact as reactWebpackConfigPlugin,
forVue as vueWebpackConfigPlugin,
forReactVue as reactVueWebpackConfigPlugin,
} from 'lila-webpack-config';
export default lila => {
webpackPlugin(lila);
webpackConfigPlugin(lila); // for normal project
// reactWebpackConfigPlugin(lila); // for react project
// vueWebpackConfigPlugin(lila); // for vue project
// reactVueWebpackConfigPlugin(lila); // React + Vue project
...
};
extended configs
: babelExcludebabel-loader exclude
type: []
default: [/node_modules/]
: extra babel presets babelPresets
type: []
default: []
Lila provided following presets internally:
- for
.{js,vue}
files:
@babel/preset-env
@babel/preset-flow
- for
.jsx
files:
@babel/preset-env
@babel/preset-flow
@babel/preset-react
: extra babel plugins babelPlugins
type: []
default: []
Lila provided following plugins internally:
- for
.js
files:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
- for
.jsx
files:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
@babel/plugin-transform-react-jsx
- for
.vue
files:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
babel-plugin-transform-vue-jsx
: extensionsurl-loader file extensions
type: []
default: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'svg', 'eot', 'ttf', 'woff', 'woff2']
: provideProvidePlugin config
type: {}
default: {}
: defineDefinePlugin config
type: {}
default: {}
: aliasresolve-alias config
type: {}
default: {}
: whether to use cssModulescss-modules
type: bool
default: false
: cssModulesNamecss-loader#localidentname
type: string
: cssModulesExcludecss-loader css-modules
exclude
type: []
default: [/node_modules/]
: browsersautoprefixer browsers
type: []
default:
[
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
]
: a static server to place bundle resources to staticServer
type: string
default: empty string
/dir
: a directoryhttp://www.static.com
: a standalone static serverhttps://www.static.com/dir
: a sub directory of a standalone static server//www.static.com/dir/sub_dir
: another sub directory of a standalone static server
: whether minify html minHtml
type: bool
default: true
: minHtmlOptionshtml-minifier config
type: {}
default:
{
removeComments: !0,
collapseWhitespace: !0,
collapseBooleanAttributes: !0,
removeEmptyAttributes: !0,
removeScriptTypeAttributes: !0,
removeStyleLinkTypeAttributes: !0,
removeRedundantAttributes: !0,
minifyJS: !0,
minifyCSS: !0,
}
: whether minify css minCss
type: bool
default: true
: whether minify js minJs
type: bool
default: true
: devtooldevtool config
type: string
default:
cmd: dev, serve
:eval-source-map
cmd: build, sync, start
:source-map
: splitChunksSplitChunksPlugin config
type: {}
default: {chunks: 'all'}
: extra webpack config options extra
type: {}/function
default: {}
extra: { ... }
extra: webpack => ({ ... })
: extra webpack rules rules
type: []
default: []
: extra webpack plugins plugins
type: []
default: []
: rebuild webpack config when you want more handling of webpack config rebuildWebpackConfig
type: function
({ webpackConfig, lila, webpack, entry, cmd, config, argv }) => newWebpackConfig;
files of an entry
An entry has a standalone directory(src/home/about/
if entry is home/about
), also called workspace, and has at least a index.html
file and a index.js
file under the workspace.
If entry
is not provided, @lila/index
will be used as default.
If entry is @lila/index
, its workspace is src
:
- src/
- index.html
- index.js
- other files and directories
Others(entry is home/about
), its workspace is src/home/about
:
- src/
- home/
- about/
- index.html
- index.js
- other files and directories
It's recommended to place all files of an entry to its workspace.
built-in rules
file extensions
.js
: pure JavaScript code.jsx
: React component code.vue
: Vue component code