# cosmos-builder-webpack

> webpack最佳实践积累

Latest version **1.3.55** (published 2021-05-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install cosmos-builder-webpack
pnpm add cosmos-builder-webpack
yarn add cosmos-builder-webpack
bun add cosmos-builder-webpack
```

Provides the command `cosmos-builder-webpack`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.55 |
| Published | 2021-05-06 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 63 |
| Unpacked size | 62 KB |
| Known vulnerabilities | 0 (+8 in 5 direct dependencies) |
| Install scripts | no |
| Author | sftc-fe-core |
| Maintainers | sftc-swz |
| Keywords | cosmos, dev-server, build, default-config |

## Links

- npm: https://www.npmjs.com/package/cosmos-builder-webpack
- Repository: http://gitlab.sftcwl.com/sftc-fe/cosmos-builder-webpack
- npm.io page: https://npm.io/package/cosmos-builder-webpack

## Dependencies (63)

- [ip](https://npm.io/package/ip.md) 1.1.5
- [ora](https://npm.io/package/ora.md) 4.0.4
- [chalk](https://npm.io/package/chalk.md) 2.4.2
- [execa](https://npm.io/package/execa.md) 4.0.2
- [leven](https://npm.io/package/leven.md) 3.1.0
- [pkg-up](https://npm.io/package/pkg-up.md) 3.1.0
- [semver](https://npm.io/package/semver.md) 6.3.0
- [core-js](https://npm.io/package/core-js.md) 3.6.5
- [express](https://npm.io/package/express.md) 4.16.4
- [find-up](https://npm.io/package/find-up.md) ^5.0.0
- [webpack](https://npm.io/package/webpack.md) 4.28.0
- [commander](https://npm.io/package/commander.md) 5.1.0
- [css-loader](https://npm.io/package/css-loader.md) 3.6.0
- [url-loader](https://npm.io/package/url-loader.md) 4.1.0
- [webpackbar](https://npm.io/package/webpackbar.md) 4.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.12.0
- [compression](https://npm.io/package/compression.md) 1.7.4
- [file-loader](https://npm.io/package/file-loader.md) 6.0.0
- [html-loader](https://npm.io/package/html-loader.md) 1.1.0
- [less-loader](https://npm.io/package/less-loader.md) 6.2.0
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.12.0
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5
- [style-loader](https://npm.io/package/style-loader.md) 1.2.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) 5.0.9
- [svg-url-loader](https://npm.io/package/svg-url-loader.md) 6.0.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) 4.12.21
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.10.4
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.10.4
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.1
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) 3.3.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 3.2.0
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) 0.13.7
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) 3.0.0
- [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) 1.0.3
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 3.0.6
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) 3.6.2
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) 2.24.3
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 1.2.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.10.4
- [circular-dependency-plugin](https://npm.io/package/circular-dependency-plugin.md) 5.0.2
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) 4.0.0
- [umi-webpack-bundle-analyzer](https://npm.io/package/umi-webpack-bundle-analyzer.md) 3.6.0
- [speed-measure-webpack-plugin](https://npm.io/package/speed-measure-webpack-plugin.md) 1.3.3
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.10.5
- [@babel/plugin-syntax-import-meta](https://npm.io/package/@babel/plugin-syntax-import-meta.md) ^7.10.4
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.10.5
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [@babel/plugin-proposal-function-bind](https://npm.io/package/@babel/plugin-proposal-function-bind.md) ^7.10.5
- [@babel/plugin-proposal-function-sent](https://npm.io/package/@babel/plugin-proposal-function-sent.md) ^7.10.4
- [@babel/plugin-proposal-do-expressions](https://npm.io/package/@babel/plugin-proposal-do-expressions.md) ^7.10.4
- [@babel/plugin-transform-destructuring](https://npm.io/package/@babel/plugin-transform-destructuring.md) ^7.10.4
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.10.4
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.10.4
- [@babel/plugin-proposal-pipeline-operator](https://npm.io/package/@babel/plugin-proposal-pipeline-operator.md) ^7.10.5
- [@babel/plugin-proposal-throw-expressions](https://npm.io/package/@babel/plugin-proposal-throw-expressions.md) ^7.10.4
- [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.10.4
- [babel-plugin-transform-typescript-metadata](https://npm.io/package/babel-plugin-transform-typescript-metadata.md) 0.3.0
- [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.10.4
- [@babel/plugin-transform-react-inline-elements](https://npm.io/package/@babel/plugin-transform-react-inline-elements.md) ^7.10.4
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) 0.4.24
- [@babel/plugin-transform-react-constant-elements](https://npm.io/package/@babel/plugin-transform-react-constant-elements.md) ^7.10.4
- [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.10.4
- [@babel/plugin-proposal-logical-assignment-operators](https://npm.io/package/@babel/plugin-proposal-logical-assignment-operators.md) ^7.10.4

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.3.55 (latest) — 2021-05-06
- 1.3.54 — 2021-05-06
- 1.3.53 — 2021-05-06
- 1.3.52 — 2021-05-06
- 1.3.51 — 2021-05-06
- 1.3.50 — 2021-04-22
- 1.3.49 — 2021-03-08
- 1.3.48 — 2021-03-08
- 1.3.46 — 2021-03-08
- 1.3.47 — 2021-03-08
- 1.3.45 — 2020-12-22
- 1.3.44 — 2020-12-08
- 1.3.43 — 2020-12-08
- 1.3.40 — 2020-11-19
- 1.3.12 — 2020-09-04
- … 28 more at https://npm.io/package/cosmos-builder-webpack/versions

## README

# cosmos-builder-webpack

 集成打包工具：可以理解为我们提供一套“最佳实践”，可以导出配置自己去修改。这样我们可以将精力都放在找“最佳实践”上。

## 特性

*  **可扩展**，导出了默认的webpack配置，支持使用外部webpackConfig打包。
*  **开箱即用**，提供了默认方案，“0配置”打包。
*  **最佳实践**，精研前端打包方案，提供通用的打包“最佳实践”。
*  **面向未来**，在满足需求的同时，我们也不会停止对新技术的探索。

## 快速上手


```bash
# 创建目录
$ mkdir myapp && cd myapp

# 安装依赖 理论上yarn安装速度会更快
$ yarn add cosmos-builder-webpack

# 启动开发
$ npx cosmos-builder-webpack server

# 生成prod
$ npx cosmos-builder-webpack build

# 输出配置
$ npx cosmos-builder-webpack output
```

## 使用简介
### CASE1：我想要加一些配置
#### 1. 引入默认配置：
```javascript
const cosmosBuilder = require('cosmos-builder-webpack');
const {  
  // webpack配置  对象 里面有dev 和 build 2个属性 分别对应 server和build命令运行时的默认配置
  buildConf, 
  // dev-server的默认配置 暂时支持 修改port 和 proxy
  serverConf,
  // 用它来merge webpack配置
  merge 
} = cosmosBuilder;
// 自己的webpack配置
const conf = {
  // webpack配置
}
// 导出结果 cosmos-builder-webpack 将使用merge结果打包
module.exports = merge(buildConf.dev, conf);
```
一些注意事项：
* `merge` 得到的结果还是webpack配置，它是能直接被当作`webpack-cli`的config来用的
* `merge` $\color{#FF3030}{目前没有}$任何的判断冲突的策略，需要使用者自己保证config没有冲突。


#### 2. 修改打包命令
   
```bash

# server命令
$ cosmos-builder-webpack server -bc <新的webpack配置> -sc <新的dev-server配置>
# cosmos-builder-webpack server -bc xxx/webpack.dev.js -sc xxx/dev.server.conf.js

# 生成prod
$ cosmos-builder-webpack build -bc <webpack配置> 
# cosmos-builder-webpack server -bc xxx/webpack.prod.js
```
### CASE2：我需要修改很多配置项（自v1.2.1版本支持）
#### 1. 使用命令：
```bash
# 输出配置文件
$ cosmos-builder-webpack output -p <输出目录 默认webpackConfig> 
```
#### 2. 按需修改配置文件

#### 3. 修改打包命令
   
```bash

# server命令
$ cosmos-builder-webpack server -bc <最终的配置文件> -sc <新的dev-server配置>
# cosmos-builder-webpack server -bc xxx/webpack.dev.js -sc xxx/dev.server.conf.js

# 生成prod
$ cosmos-builder-webpack build -bc <最终的配置文件> 
# cosmos-builder-webpack server -bc xxx/webpack.prod.js
```

### 环境变量
#### NODE_ENV

不传默认build命令为`production`，server为`development`

```bash
$ NODE_ENV=development cosmos-builder-webpack build
```
#### SHOW_SPEED_MEASURE

分析 Webpack 编译时间，支持 `CONSOLE` 和 `JSON` 两种格式，默认是 `CONSOLE`。

```bash
$ SHOW_SPEED_MEASURE=CONSOLE cosmos-builder-webpack build
```
#### ANALYZER_MODE

分析 Webpack 打包结果，支持 `STATIC` 和 `JSON` 两种格式，默认是 `STATIC`。

```bash
$ ANALYZER_MODE=JSON cosmos-builder-webpack build
```

### 各种方案

#### 1. TS的处理
  我们采用了`babel-loader`去处理TS，它的做法是直接移除了TS语法，带来了更快的编译速度，但是无法进行类型检查，需要使用者自己依靠编辑器的类型检查或者使用第三方插件例如[fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin)
#### 2. polyfill
  按照面向未来的原则，我们拥抱了最新的babel-polyfill方案，使用`core-js@3.x`版本并对所有入口做按需引入，所有使用者理论上不用关心polyfill的问题（polyfill的目标： chrome: 49, firefox: 64, safari: 5, edge: 13, ios: 10, ie: 11 ）。
#### 3. 分包策略
  对满足以下条件的包，进行拆分：
  * 第三方（node_modules下）
  * `size > 100kb` 这个应该是原包尺寸，所以打出来也会有小于100kb的包
  * 最多支持`10`个拆分包，意思是比如所有入口加起来有12个第三方依赖且满足上述2个条件，那我只会取前`10`个最大的打成包，原因是浏览器最大的请求并发数为10（ie8）
### 4. gzip
  我们对超过`10kb`的包会生成gzip文件，以空间换时间

---
_Source: https://npm.io/package/cosmos-builder-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._