webpack-boost

v0.0.7

Published

4 years ago

Webpack-Boost is a convenient config for webpacking you app.

0High
0Medium
0Low

banama

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

License

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme