# webpack-setting

> webpack的统一配置，可应用不同的项目搭建

Latest version **1.5.1** (published 2021-11-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpack-setting
pnpm add webpack-setting
yarn add webpack-setting
bun add webpack-setting
```

Provides the command `serein`.

## 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.5.1 |
| Published | 2021-11-16 |
| First published | 2020-01-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 42 |
| Unpacked size | 35.5 KB |
| Known vulnerabilities | 0 (+8 in 3 direct dependencies) |
| Install scripts | no |
| Author | dilomen |
| Maintainers | dilomen |

## Links

- npm: https://www.npmjs.com/package/webpack-setting
- npm.io page: https://npm.io/package/webpack-setting

## Dependencies (42)

- [ejs](https://npm.io/package/ejs.md) ^3.0.1
- [ora](https://npm.io/package/ora.md) ^5.1.0
- [vue](https://npm.io/package/vue.md) ^2.6.12
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [react](https://npm.io/package/react.md) ^17.0.1
- [webpack](https://npm.io/package/webpack.md) ^5.26.0
- [inquirer](https://npm.io/package/inquirer.md) ^8.0.0
- [commander](https://npm.io/package/commander.md) ^7.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [uglify-js](https://npm.io/package/uglify-js.md) ^3.12.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.16.0
- [css-loader](https://npm.io/package/css-loader.md) ^5.1.3
- [typescript](https://npm.io/package/typescript.md) ^4.2.3
- [vue-loader](https://npm.io/package/vue-loader.md) ^15.9.6
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.0
- [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.20
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.5.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2
- [style-loader](https://npm.io/package/style-loader.md) ^2.0.0
- [thread-loader](https://npm.io/package/thread-loader.md) ^2.1.3
- [webpack-chain](https://npm.io/package/webpack-chain.md) ^6.5.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.3
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^5.2.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^11.0.4
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.2
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.0
- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.2.3
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^6.7.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.1.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.3.1
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^3.0.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.1.1
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.12
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^1.3.9
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^2.2.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.1.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.16.0
- [@types/react-test-renderer](https://npm.io/package/@types/react-test-renderer.md) ^17.0.1
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^5.0.4
- [@teamsupercell/typings-for-css-modules-loader](https://npm.io/package/@teamsupercell/typings-for-css-modules-loader.md) ^2.4.0

## Recent versions

- 1.5.1 (latest) — 2021-11-16
- 1.5.0 — 2021-11-15
- 1.4.7 — 2021-07-21
- 1.3.7 — 2021-03-16
- 1.3.6 — 2021-03-16
- 1.2.6 — 2021-01-23
- 1.2.5 — 2020-12-02
- 1.2.4 — 2020-11-26
- 1.2.3 — 2020-11-25
- 1.2.2 — 2020-11-24
- 1.2.1 — 2020-11-24
- 1.2.0 — 2020-11-24
- 1.1.9 — 2020-05-01
- 1.1.8 — 2020-04-26
- 1.1.7 — 2020-04-26
- … 17 more at https://npm.io/package/webpack-setting/versions

## README

# 介绍

一个帮助你快速搭建 webpack 环境的工具~

## 全局使用

### 全局安装

```bash
npm install -g webpack-setting
```

```bash
yarn global add webpack-setting
```

可以直接使用指令执行对应的文件，无需再次安装项目环境

![指令图解](./static/command.png)

#### 直接命令行执行指定的入口文件

```bash
serein run -e ./index.js
```

[Example](https://github.com/Dilomen/webpack-setting/tree/master/example/command-vue-demo/index.js)

#### 命令行参数

可通过-h 参数参看

| 简写 | 全称                          | 作用                      |
| ---- | ----------------------------- | ------------------------- |
| -V   | --version                     | 版本号                    |
| -f   | --framework \<framework>      | 选择的框架 react \| vue   |
| -e   | --entry \<file>               | 入口文件路径              |
| -c   | --config \<path> \<framework> | serein.config.js 文件路径 |
| -ts  | --typescript                  | 是否支持 ts               |

#### 直接进行打包任务

```bash
serein run -e ./index.js
```

#### 可以查看当前工具中的依赖及版本

```bash
serein dep
```

#### 也可以指定查看一个依赖的版本号

```bash
serein dep vue
```

#### 可以安装相应的依赖，规则和 npm 一致，只有--save-dev 和--save

```bash
serein install vue
```

```bash
serein install vue --save-dev
```

## 项目内安装

### 安装命令

```bash
npm install webpack-setting
```

```bash
yarn add webpack-setting
```

### 设置 package.json 中的命令，就可以执行命令，进行开发和打包

```js
"scripts": {
    "start": "npm run dev",
    "dev": "serein run",
    "build": "serein build"
}
```

#### 支持对配置文件的路径进行自定义

```js
"dev": "serein run -c ./config/serein.config.js",
"build": "serein build -c ./config/serein.config.js"
```

### 可在根目录下配置自定义的 webpack 配置

为了降低学习成本，及更改配置项的灵活性，将采用 webpack-chain 插件，可以以以下两种方式进行 webpack 配置的修改

- 直接对象 merge 覆盖
- 使用[webpack-chain](https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans?spm=a2c6h.14275010.0.0.3d7b22efZu5PJT)的方式

需要在根目录下建一个 serein.config.js 的文件

chainWebpack > configureWebpack，即 chainWebpack 在 configureWebpack 之后执行

```js
module.exports = {
  CDNJS: [], // 支持对CDN的加入，不要在根目录建html文件，即可自动化生成带有CDN的html文件
  CDNCSS: [],
  config: {
    framework: 'react', // default: react 暂只支持 react | vue
    ts: false, // default: false
    css: ['less', 'scss'], // default: [] 暂只支持 less | scss
  },
  // 直接返回一个webpack配置对象，该对象会和已有的对象进行合并
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {};
    } else {
      return {};
    }
  },
  // 对已有配置通过webpack-chain的规则进行修改
  chainWebpack: (config) => {
    config.resolve.alias.set('src', './src/');
  },
};
```

### 关于 CDN 的引入

如果使用配置中的 CDN 引入，请不要在根目录下建 html 文件（该项目会根据你的配置生成 html 文件），然后你就可以在开发中直接使用 CDN 的相关内容，不需要再引入 npm 包，从而大大减少项目的体积

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