node package manager

webpack-boost

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-initbuild.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自行配置。

License

https://opensource.org/licenses/mit-license.php