Easepack 是基于 webpack 的通用打包工具，内置常用插件和加载器的默认配置。
安装
npm install --save-dev easepack
用法
启动开发服务器：
easepack start --config ./config/easepack.dev.js
构建生产环境:
easepack build --config ./config/easepack.prod.js
快速上手
-
创建项目:
mkdir easepack-demo && cd easepack-demonpm init -ynpm install easepack --save-dev
easepack-demo + |- package.json -
创建文件:
-
.eslintrc
{ "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "env": { "browser": true } } -
easepack.js
module.exports = { presets: [ [ require.resolve('easepack/lib/config/es'), /* 继承 easepack/lib/config/es 的配置 */ { input: 'index.html' /* 设置项目入口文件 */ } ] ] };
-
index.html
<!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <script src="./src/index.js"></script> </body> </html>
-
src/index.js
function component() { var element = document.createElement('div'); element.innerHTML = 'Hello easepack!'; return element; } document.body.appendChild(component());
easepack-demo |- package.json + |- .eslintrc + |- easepack.js + |- index.html + |- /src + |- index.js -
-
启动开发服务器:
npx easepack start --config ./easepack.js -
构建生产环境:
npx easepack build --config ./easepack.js
配置
Easepack 在 webpack 的基础上增加了一项配置 preset，用于继承一些公用的配置。除此之外，Easepack 支持 webpack 的所有配置，并且会覆盖 preset 中的配置。
{
// 类似 babel 的 presets
presets: [
[
string, // 预设模块的路径（绝对路径）
object // 预设模块的参数
]
// 可以配置多个预设模块
]
}
内置 Presets
到目前为止，Easepack 内置了两个预设配置：easepack/lib/config/es 和 easepack/lib/config/react。
除了后者针对 react 增加了一些 babel 配置外，它们数都支持以下预设参数：
-
mode: 构建模式，等同于 webpack4 新增的属性 mode.
Easepack 默认根据构建命令来设置 mode。如果是
build， 那么mode默认设置为production。如果是start，那么mode默认设置为development。 -
context：基础目录，绝对路径，用于从配置中解析入口起点和加载器，等同于 contenxt，默认值为项目的根路径。
-
input：起点或是应用程序的起点入口，等同于 entry，默认值为
src/index.js。 -
vendors：构建缓存（DLL 插件实现），推荐在开发环境使用，生成环境的拆包请使用 webpack4 的 splitChunks。
- false: 禁用该项功能，默认值。
- true: 自动查找项目的第三方依赖来构建缓存（package.json 的 dependencies）
- string|array|object: 等同于 entry，可以自定义构建缓存模块。
-
outputPath：构建输出路径，等用于 output.path，默认值是
dist。 -
publicPath： 打包资源的服务路径，等同于 output.publicPath，默认值是
/。 -
filename：输出文件命名方式
- filename.js: JS 文件命名规则
- filename.css: CSS 文件命名规则
- filename.media: 图片，音频等其他媒体文件的命名规则
- filename.library: DLL 库的命名规则
- filename.html: HTML 的命名规则
默认情况下，easepack 针对不同的 mode 提供了不同的默认配置
-
生产环境
{ filename: { js: '[name].[contenthash:8].js', css: '[name].[contenthash:8].css', media: '[name].[hash:8].[ext]', manifest: '[name].manifest.json', library: '[name]_library', html: '[name].html' } }
-
开发环境
{ filename: { js: '[name].[hash:8].js', css: '[name].[hash:8].css', media: '[name].[hash:8].[ext]', manifest: '[name].manifest.json', library: '[name]_library', html: '[name].html' }, }
-
targets：编译兼容目标，等同于 babel-preset-env targets，默认值为
{ browsers: ['last 2 versions', 'safari >= 7'] }。 -
hot: 是否启用热加载，默认值为
true -
sourceMap: 是否启用 sourceMap，等同于 devtool，开发环境默认为
eval，生产环境默认为false。 -
analyzer: 是否启用构建分析，为
true会使用webpack-bundle-analyzer来分析打包文件的内部组成和模块占用大小。生成环境默认为true，开发环境默认为false。 -
dataURLLimit：设置
url-loader的属性limit，开发环境默认为1，生产环境默认为5120。 -
cssModules: 是否启动 CSS Modules，默认
false。 -
env：针对不同
mode的特殊配置。- env.production：在
mode等于production时，该项配置会覆盖外部的预设参数。 - env.development：在
mode等于development时，该项配置会覆盖外部的预设参数。
- env.production：在
