# webpack-plugin-import

> 自动引入组件 style.js

Latest version **0.3.0** (published 2021-10-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-plugin-import
pnpm add webpack-plugin-import
yarn add webpack-plugin-import
bun add webpack-plugin-import
```

## Health

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

Positive: no vulnerabilities; popular repo.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-10-28 |
| First published | 2018-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18614 |
| Author | ICE Team |
| Maintainers | zeroling, yuanyan, noyobo, yujiangshui, clarkxia, chenjun1011, chenbin93, rax-publisher |

## Links

- npm: https://www.npmjs.com/package/webpack-plugin-import
- Repository: https://github.com/alibaba/ice/tree/master/packages/webpack-plugin-import
- npm.io page: https://npm.io/package/webpack-plugin-import

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0

## Recent versions

- 0.3.0 (latest) — 2021-10-28
- 0.3.0-beta.1 (beta) — 2021-10-28
- 0.2.9 — 2021-10-11
- 0.2.9-beta.1 — 2021-09-30
- 0.2.8 — 2021-09-28
- 0.2.7 — 2021-02-24
- 0.2.7-beta.2 — 2021-02-22
- 0.2.7-beta.1 — 2021-02-04
- 0.2.6 — 2020-01-13
- 0.2.5 — 2019-03-26
- 0.2.3 — 2019-01-29
- 0.2.2 — 2019-01-24
- 0.2.1 — 2018-09-12
- 0.2.0 — 2018-09-12
- 0.1.2 — 2018-02-04
- … 2 more at https://npm.io/package/webpack-plugin-import/versions

## README

# webpack-plugin-import

自动引入组件 style.js

## Why

为了避免开发过程中开发者需要手动引入组件样式，通过工程的方式自动引入。如果只是使用基础组件，那么直接用 babel-plugin-import 配置固定包名即可实现，但是如果有业务组件（不可枚举的 npm），则需要通过该插件解决。

## Feature

- 如果依赖 npm 的 package.json 里有 componentConfig 字段（ice-devtools 生成），则默认引入 style.js
- 根据参数对于指定的包名引入 style.js

## Use

```js
const WebpackConfig = require('webpack-chain');
const WebpackPluginImport = require('webpack-plugin-import');

const config = new WebpackConfig();
config.plugin('import').use(WebpackPluginImport, [
  // 如果不能保证 npm 里有 componentConfig 字段，则通过白名单方式指定
  {
    libraryName: /^@icedesign\/base\/lib\/([^/]+)/,
    stylePath: 'style.js',
  },
  {
    libraryName: /@icedesign\/.*/,
    stylePath: 'style.js',
  },
  {
    libraryName: /^@alifd\/next\/lib\/([^/]+)/,
    stylePath: 'style.js',
  },
  {
    libraryName: /@alifd\/.*/,
    stylePath: 'style.js',
  },
]);
```

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