https://github.com/fwh1990/webpack-genius

TS定制版智能webpack框架
https://github.com/fwh1990/webpack-genius

genius webpack webpack-chain webpack-chains webpack-cli

Last synced: about 1 month ago
JSON representation

TS定制版智能webpack框架

• Host: GitHub
• URL: https://github.com/fwh1990/webpack-genius
• Owner: fwh1990
• License: mit
• Created: 2019-11-13T06:35:14.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-11T17:25:27.000Z (over 3 years ago)
• Last Synced: 2024-10-30T01:03:58.565Z (about 2 months ago)
• Topics: genius, webpack, webpack-chain, webpack-chains, webpack-cli
• Language: JavaScript
• Homepage:
• Size: 4.25 MB
• Stars: 10
• Watchers: 1
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 安装

```bash

yarn add webpack-genius --dev

```

# 特性

* 支持所有常用文件后缀

* 超快的开发热更新

* 智能配置，外加TS提示

# 案例

[React Hooks](https://github.com/redux-model/demo-react-hooks)

# 使用方法

创建文件 `webpack.config.ts`。注意不是 `.js` 后缀

```typescript

import webpackGenius from 'webpack-genius';

export default webpackGenius(3000);

```

然后把下面的指令加入到文件 `package.json`

```json

{

    "scripts": {

        "start": "webpack-genius start",

        "build": "webpack-genius build --env production"

    }

}

```

### 入口文件

框架会优先使用 `package.json`中的 `main` 字段作为入口文件，如果没有这个字段或者文件不存在，框架会接着自动查找文件 `index`, `Index`, `src/index`, `src/Index`，只要他们携带 `.js`, `.ts`, `.jsx`, `.tsx` 中的任意一个后缀就算找到。

当然了，您也可以手动指定

```typescript

import webpackGenius from 'webpack-genius';

export default webpackGenius(3000, (genius) => {

    genius.entry('./src/entries/index.tsx');

});

```

### 域名

默认使用IP `0.0.0.0`，这样本机和局域网都能访问到您的项目。

您也可以使用域名

```typescript

import webpackGenius from 'webpack-genius';

export default webpackGenius(3000, (genius) => {

    genius

        .entry('...')

        .devServer((server) => {

            server.host = '自定义域名或者IP';

        });

});

```

### 指定 `index.html`

框架会自动找这些文件 `index`, `public/index`, `src/index`, `src/public/index`, `assets/index`, `src/assets/index`， 只要它们携带 `.html` `.htm` 中的任意一种格式就算找到。

当然了，您也可以手动指定

```typescript

import webpackGenius from 'webpack-genius';

export default webpackGenius(3000, (genius) => {

    genius

        .entry('...')

        .pluginHtml((plugin) => {

            plugin.setTemplate('./src/entries/index.html');

        });

});

```

### Css Modules

强烈推荐各位使用 `css-modules` 特性，有了它，我们不再需要关心样式是否会被污染或者覆盖了。

当然了，您也可以关掉它

```typescript

import webpackGenius from 'webpack-genius';

export default webpackGenius(3000, (genius) => {

    genius

        .disableCssModules();

});

```