# webpack-config-zero

> webpack.config 零配置定制化生成器

Latest version **0.5.0** (published 2019-01-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install webpack-config-zero
pnpm add webpack-config-zero
yarn add webpack-config-zero
bun add webpack-config-zero
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-01-28 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | NZ |
| Maintainers | nicolaszhao |
| Keywords | webpack |

## Links

- npm: https://www.npmjs.com/package/webpack-config-zero
- Repository: https://github.com/nicolaszhao/webpack-config-zero
- Homepage: https://github.com/nicolaszhao/webpack-config-zero#readme
- Issues: https://github.com/nicolaszhao/webpack-config-zero/issues
- npm.io page: https://npm.io/package/webpack-config-zero

## 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

- 0.5.0 (latest) — 2019-01-28
- 0.4.3 — 2018-11-29
- 0.4.2 — 2018-11-14
- 0.4.1 — 2018-10-23
- 0.4.0 — 2018-10-22
- 0.3.11 — 2018-10-16
- 0.3.10 — 2018-10-12
- 0.3.9 — 2018-09-20
- 0.3.8 — 2018-09-17
- 0.3.7 — 2018-09-17
- 0.3.6 — 2018-09-17
- 0.3.5 — 2018-09-13
- 0.3.4 — 2018-09-13
- 0.3.3 — 2018-09-06
- 0.3.2 — 2018-09-04
- … 16 more at https://npm.io/package/webpack-config-zero/versions

## README

# webpack-config-zero

webpack.config 零配置定制化生成器

## why?

* webpack 配置繁琐、复杂（蛋疼）
* webpack 很多项目在搭建脚手架时都是复制之前项目的 `webpack.config.js` 配置
* 如果有多套脚手架工程，当 webpack 的升级，配置优化和调整，这些脚手架需要逐一修改

## How to use?

### 安装
`webpack-config-zero` 需要 webpack v4+ 以及 NodeJS v8+

```shell
npm i --save-dev webpack-config-zero
```

#### webpack 依赖

```shell
npm i --save-dev webpack webpack-cli webpack-dev-server
```

##### webpack loaders

```shell
npm i --save-dev @babel/core babel-loader style-loader css-loader node-sass sass-loader postcss-loader url-loader file-loader html-loader resolve-url-loader

# 如果是 React 脚手架，为了正常启用热更新，你需要安装 react-hot-loader
npm i --save-dev react-hot-loader@next

# 如果是 Vue 脚手架，你需要安装额外的 loader
npm i --save-dev vue-loader vue-template-compiler
```

##### webpack plugins

###### html-webpack-plugin with alpha version 

webpack v4 使用了动态分割 chunk（splitChunks） 的功能，在多入口、多页面模式下，html-webpack-plugin 的现有版本没有很好的办法解决一个 html 只插入当前 entry 的依赖 chunks。默认状态下会把所有 chunks 插入，或者通过 opions.chunks 或者 options.excludeChunks 来解决，但 splitChunks 需要做大量的改动，且效果不是非常理想。现在， html-webpack-plugin@next 版本中似乎解决了这个问题。

```shell
npm i --save-dev html-webpack-plugin@next
```

###### plugins for build production

```shell
npm i --save-dev clean-webpack-plugin copy-webpack-plugin mini-css-extract-plugin uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin inline-manifest-webpack-plugin 
```

##### others

```shell
npm i --save-dev @babel/preset-env webpack-merge
```

##### 安装推荐可选依赖

```shell
npm i --save-dev autoprefixer postcss-px2rem
```

##### TypeScript

安装 NPM 依赖包:

```shell
npm i --save-dev typescript ts-loader
```

在项目根目录中，新建文件 `tsconfig.json` ：

```json
{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": [
    "./src/**/*"
  ]
}
```

如果是 React 脚手架，需要增加 `tsconfig.json` 配置项：

```diff
{
  "compilerOptions": {
    ...
+   "jsx": "react"
  },
  ...
}
```



如果是 Vue 脚手架，需要在 `src/` 下新建声明文件 `vue-shims.d.ts`：

```tsx
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
```

更多 TypeScript 配置，请参考：

- [TypeScript Babel Starter](https://github.com/Microsoft/TypeScript-Babel-Starter#readme)
- [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter)
- [TypeScript Vue Starter](https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter)

### 目录规范

#### 单页

```shell
.
├── dist
├── lib
├── src
│   ├── config
│   │   └── public-path.js
│   ├── containers
│   │   ├── index.html
│   │   └── index.js
│   └── styles
├── .babelrc
└── webpack.config.js
```

#### 多页

```shell
.
├── dist
├── lib
├── src
│   ├── config
│   │   └── public-path.js
│   ├── containers
│   │   ├── About
│   │   │   ├── about.scss
│   │   │   ├── app.js
│   │   │   ├── index.html
│   │   │   └── index.js
│   │   └── Home
│   │       ├── app.js
│   │       ├── home.scss
│   │       ├── index.html
│   │       └── index.js
│   └── styles
├── .babelrc
└── webpack.config.js
```

### 配置

#### `.babelrc`

```json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}
```

#### `webpack.config.js`

```js
const zeroConfig = require('webpack-config-zero');
module.exports = zeroConfig({ /* options */ });
```

#### `package.json`

```json
{
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0 --port 3003",
    "build": "NODE_ENV=production webpack --progress --colors"
  },
}
```

### Run

#### 开发环境

```shell
npm start
```

#### 生产构建

```shell
npm run build
```

windows 系统需要另外安装 [cross-env](https://www.npmjs.com/package/cross-env) 依赖包：

```shell
npm i --save-dev cross-env
```

修改 npm scripts：

```diff
"scripts": {
-  "build": "NODE_ENV=production webpack --progress --colors"
+  "build": "cross-env NODE_ENV=production webpack --progress --colors"
},
```

## Options

| 属性                        | 数据类型 | 默认值                     | 说明                                                         |
| --------------------------- | -------- | -------------------------- | ------------------------------------------------------------ |
| input                       | String   | 'src'                      | 源码目录                                                     |
| output                      | String   | 'dist'                     | 打包输出目录                                                 |
| include                     | Object   |                            | 需要额外执行 loader 的路径。某些 `node_modules` 下的 npm 包（比如本人），是没有进行过（比如 ES6, SASS 等）转换的 |
| spa                         | Boolean  | true                       | 单/多页选项。entry、代码分离、html-webpack-plugins 都会根据该选项来做不同的处理 |
| cssModules                  | Boolean  | true                       | 开启 `cssModules`。如果为 `true` ，`src/styles` 下默认会做 global 处理，不需要额外声明 `:global` |
| containers                  | String   | 'containers'               | 页面容器目录，位于 `src` 下                                  |
| runtimePublicPath           | String   | ' /'                       | webpack 的运行时 `publicPath` 路径，该值将会注入到 `process.env.RUNTIME_PUBLIC_PATH` 变量，通常用于异步 chunk。注意：需要在入口模块处单独导入，见下方示例 |
| copyPathname                | String   | 'lib'                      | 第三方非模块文件目录                                         |
| multipageHome               | String   | 'home'                     | `spa` 为 `false` 时，`src/containers` 下将哪个页面容器作为主入口 |
| customizeHtmlWebpackPlugins | Function | null                       | 自定义 html-webpack-plugin 模版，该方法需要返回含有 html-webpack-plugin 实例的数组 |
| view                        | String   | 'react' \| 'vue' \| 'pure' | 默认会自动检测项目根目录下  `package.json`  中安装的 view 依赖框架（React 或 Vue），如果 2 者都没有，默认设置为 'pure'，你也可以手动修改 |

*runtimePublicPath:*

```js
// public-path.js
__webpack_public_path__ = process.env.RUNTIME_PUBLIC_PATH;

// entry.js
import './public-path.js'
// import other modules
```

参见：[webpack 官方指南](https://webpack.js.org/guides/public-path/)

### include

通过 `options` 传入的参数会和默认值合并：

| 属性       | 数据类型 | 默认值                                                 | 说明                                                         |
| ---------- | -------- | ------------------------------------------------------ | ------------------------------------------------------------ |
| js         | Array    | [  '/src'  ]                                           | 需要 `babel-loader`  编译的目录路径，支持：*.js, *.jsx       |
| css        | Array    | [  '/src' ]                                            | 需要 `sass-loader` 编译的目录路径，支持：*.css, *.scss       |
| cssModules | Object   | {  global: [  '/src/styles'  ], local: [  '/src'  ]  } | 需要 `css-loader` 的 CSS-MODULES 编译的目录路径，`options.cssModules` 为 `true` 时有效，支持：*.css, *.scss |
| res        | Array    | [  '/src'  ]                                           | 需要 `file-loader` 处理的目录路径，支持：*.jpg, *.png, *.gif, *.svg, *.eot, *.woff, *.ttf, *.svg, *.mp3 |

### 默认配置无法满足怎么办？

安装 `webpack-merge`，然后扩展默认配置：

```js
const zeroConfig = require('webpack-config-zero');
const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(
  zeroConfig( /* options */ ), 
  { /* webpack config options */ }
);
```

根据不同环境扩展默认配置：

```js
let config = zeroConfig( /* options */ );

if (process.env.NODE_ENV !== 'production') {
  config = webpackMerge(config, { /* webpack dev config options */ });
} else {
  config = webpackMerge(config, { /* webpack prod config options */ });
}

module.exports = config;
```

## License

[MIT](LICENSE)

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