webpack-boost
Webpack-Boost is a convenient config for webpacking you app.
Webpack-Boost
webpack-boost 是一个简化配置webpack的项目，通过 webpack-boost 可以快速开始一个可用的前端项目构建。
安装
npm install webpack-boost@latest
用法
或
参考项目 vue-webpack-init
示例
pro模式配置
new wb()
.setProject('webpack-boost')
.setPath('static')
.setPublic('static/project')
.setEntry({
main: ['./src/main.js', './style/style.sty'],
other: ['./src/main.js', './style/style.sty']
})
.setHtml([
{
template: "./index.html",
filename: "index.html",
chunk: ['main']
},
{
template: "./other.html",
filename: "other.html",
chunk: ['other']
}
])
.pro()
.hook(function(){
this.config.postcss.push(require('cssnano'))
})
.run()
打包 out 目录
static
├── index.html
├── other.html
└── webpack-boost
├── main.31ad98b4c9c06d325196.js
├── main.css
├── other.31ad98b4c9c06d325196.js
└── other.css
生成index.html
<head>
<link href="/static/projects/teststatic/main.css" rel="stylesheet">
</head>
<script src="/static/projects/teststatic/main.5c812e77078e23dcee24.js"></script>
注
部署时，只需将template移动到server， static/webpack-boost 移动到CDN服务器即可。
Ps: 约定静态资源请求路径为 /static/project/webpack-boost
other
-
vue-webpack-init 和 build.js 使用一套约定的配置。
live模式用于前后端分离的开发。dev模式用于测试部署。pro模式用于正式环境。- live 通过热更新、代理服务器实现前后端分离和便捷开发。
- dev 模式通过 publicPath 和 chunkfilename 配置好静态资源加载目录。
- pro 模式完成压缩/Hash等静态资源的优化。
-
Extract-text-plugin 插件需要同时设置 loader 和 plugin， 否则会出现
loader is used without the corresponding plugin
api
setPath
设置webpack的build目录， 例如 dist、static
setPublic
设置webpack的publicPath，publicPath是 he public URL address of the output files when referenced in a browser， 或者可以理解为CDN.
setProject
project是 webpack-boost 的一个内部变量，它辅助所有打包生成的静态资源再同一工程目录下，同时辅助配置请求的资源路径。
setEntry
参数是一个对象，配置webpack config的entry，格式和config.entry的配置相同
setHtml
配置 html-webpack-plugin， 配置相同
plugins
配置插件，内部同一个 unshift 方法将新增插件加入配置文件中。
loaders
同 plugins
setExtract
配置 extrac-text-webpack-plugin，这个插件使用过程中需要同时配置loader和plguin，因此，如果覆写 module.exports.plugins 会出现这个问题。
setExtract 接收两个参数，一个是需要配置extname的名单和生成的文件名。
setClean
使用 webpack-clean-plugin 插件清除文件或文件夹。
hook
通过一个钩子函数操作 webpack config
run
运行 webpack
live
通过 webpack-dev-server， 开启热更新。 如果需要配置 dev-only-hot 可fork自行配置。