lila-webpack-config
内置的 webpack 配置生成器 for lila-webpack
.
安装
npm install --save-dev lila-webpack-config
使用
在 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); // 通用项目
// reactWebpackConfigPlugin(lila); // React 组件项目
// vueWebpackConfigPlugin(lila); // Vue 组件项目
// reactVueWebpackConfigPlugin(lila); // React + Vue 组件项目
...
};
扩展的配置
babelExclude
: babel-loader exclude
type: []
default: [/node_modules/]
babelPresets
: 其他的 babel presets
type: []
default: []
Lila 内部提供了下面的 presets:
- 针对
.{js,vue}
文件:
@babel/preset-env
@babel/preset-flow
- 针对
.jsx
文件:
@babel/preset-env
@babel/preset-flow
@babel/preset-react
babelPlugins
: 其他的 babel plugins
type: []
default: []
Lila 内部提供了下面的 plugins:
- 针对
.js
文件:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
- 针对
.jsx
文件:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
@babel/plugin-transform-react-jsx
- 针对
.vue
文件:
@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
babel-plugin-transform-vue-jsx
extensions
: url-loader 静态文件扩展名
type: []
default: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'svg', 'eot', 'ttf', 'woff', 'woff2']
provide
: ProvidePlugin 配置
type: {}
default: {}
define
: DefinePlugin 配置
type: {}
default: {}
alias
: resolve-alias 配置
type: {}
default: {}
cssModules
: 是否使用 css-modules
type: bool
default: false
cssModulesName
: css-loader#localidentname
type: string
cssModulesExclude
: css-loader css-modules
exclude
type: []
default: [/node_modules/]
browsers
: autoprefixer browsers
type: []
default:
[
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
]
staticServer
: 存放静态文件的服务器 url 地址
type: string
default: empty string
-
/dir
: 一个目录 -
http://www.static.com
: 单独的静态资源服务器 -
https://www.static.com/dir
: 单独的静态资源服务器的一个子目录 -
//www.static.com/dir/sub_dir
: 单独的静态资源服务器的二级子目录
minHtml
: 是否压缩 html
type: bool
default: true
minHtmlOptions
: html-minifier 配置
type: {}
default:
{
removeComments: !0,
collapseWhitespace: !0,
collapseBooleanAttributes: !0,
removeEmptyAttributes: !0,
removeScriptTypeAttributes: !0,
removeStyleLinkTypeAttributes: !0,
removeRedundantAttributes: !0,
minifyJS: !0,
minifyCSS: !0,
}
minCss
: 是否压缩 css
type: bool
default: true
minJs
: 是否压缩 js
type: bool
default: true
devtool
: devtool 配置
type: string
default:
-
cmd: dev, serve
:eval-source-map
-
cmd: build, sync, start
:source-map
splitChunks
: SplitChunksPlugin 配置
type: {}
default: {chunks: 'all'}
sassResources
: sass-resources-loader 配置的 resources
可用版本 >= v1.0.2
type: string/array
extra
: 其他的 webpack 配置项
type: {}/function
default: {}
extra: { ... }
extra: webpack => ({ ... })
rules
: 其他的 webpack rules
type: []
default: []
plugins
: 其他的 webpack plugins
type: []
default: []
rebuildWebpackConfig
: 对最终生成的 webpack 配置进行重构
type: function
({ webpackConfig, lila, webpack, entry, cmd, config, argv }) => newWebpackConfig;
一个 entry 所包含的文件
每个 entry 都有一个单独的目录(目录为 src/home/about/
如果 entry 是 home/about
), 也叫做工作空间, 在这个工作空间中至少有一个 index.html
文件和一个 index.js
文件.
如果 entry
未提供, 将使用 @lila/index
为默认 entry.
如果 entry 是 @lila/index
, 则它的工作空间就是 src
:
- src/
- index.html
- index.js
- 其他文件与目录
其他的话(比如 entry 是 home/about
), 则它的工作空间是 src/home/about
:
- src/
- home/
- about/
- index.html
- index.js
- 其他文件与目录
推荐把一个 entry 所有的文件和目录都放到这个工作空间下
内置的 rules
- babel-loader
- url-loader
- html-loader
- css-loader
- less-loader
- sass-loader
- sass-resources-loader
- vue-loader
文件扩展名
-
.js
: 纯 JavaScript 代码 -
.jsx
: React 组件代码 -
.vue
: Vue 组件代码