npm package: @systemlight/webpack-config
Description: Webpack smart configuration.
Author: SystemLighht
Latest version: 6.7.3

# @systemlight/webpack-config

[![NPM version](https://img.shields.io/npm/v/@systemlight/webpack-config.svg)](https://www.npmjs.com/package/@systemlight/webpack-config)

> Webpack smart configuration.

## Support

- [x] webpack5
- [x] babel
- [x] mockjs
- [x] typescript
- [x] css
- [x] postcss
- [x] sass
- [x] less
- [x] stylus
- [x] react
- [x] vue

## Usage

### Install

```bash
npm i @systemlight/webpack-config webpack -D
or
yarn add @systemlight/webpack-config webpack -D
or
pnpm add @systemlight/webpack-config webpack -D
```

### Usage

Generate `webpack.config.js`

```bash
wcf init
```

Pop up configuration file

```bash
wcf inspect
wcf inspect build --mode production
wcf inspect server --mode production
```

### Options

All configuration items are default values generated by the intelligent detection environment, and no configuration is
required without special requirements

- [API](src/interface/Webpack5RecommendConfigOptions.ts)
- [examples](https://github.com/SystemLight/T-webpack5)
- [Tutorials](https://juejin.cn/post/7139735372237373471)

### Case

- Additional split code configuration

```js
const {wcf} = require('@systemlight/webpack-config')

module.exports = wcf({
  enableDevtool: false,
  chainWebpack(config, context) {
    context.configSplitChunks((options) => {
      options.cacheGroups['foos'] = {
        name: 'fooa',
        test: /foo/,
        enforce: true,
        priority: 10
      }
    })
  }
})
```

- Ignored files should not have calls to import, require, define or any other importing mechanism

```js
const {wcf} = require('@systemlight/webpack-config')

module.exports = wcf({
  enableDevtool: false,
  emitHtml: false,
  chainWebpack(config) {
    config.module.noParse(/jquery|lodash/)
  }
})
```

- Access global jQuery

```js
const {wcf} = require('@systemlight/webpack-config')

module.exports = wcf({
  enableDevtool: false,
  chainWebpack(config, context) {
    config.module.rule('jquery')
      .test(/jquery/)
      .use('expose-loader')
      .loader('expose-loader')
      .options({
        exposes: ['$', 'jQuery']
      })

    context.configSplitChunks((options) => {
      options.cacheGroups['jquery'] = {
        name: 'jquery',
        test: /jquery/,
        enforce: true,
        priority: 10
      }
    })
  }
}, false)
```

```js
const {wcf} = require('@systemlight/webpack-config')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = wcf({
  enableDevtool: false,
  configureWebpack: {
    plugins: [
      new AddAssetHtmlPlugin({
        filepath: require.resolve('jquery')
      })
    ]
  }
}, false)
```

- Pop up TS type declaration file

```js
module.exports = wcf({
  enableHash: false,
  isNodeEnv: true,
  libraryName: 'Fuse',
  chainWebpack(config) {
    config.module.rule('ts/tsx').use('ts-loader').tap((args) => {
      args['transpileOnly'] = false
      args['compilerOptions']['noEmit'] = false
      return args
    })
  }
})
```

- Custom inject label

```js
const {wcf} = require('@systemlight/webpack-config')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = wcf({
  enableDevtool: false,
  configureWebpack: {
    plugins: [
      new AddAssetHtmlPlugin({
        filepath: require.resolve('jquery')
      })
    ]
  },
  chainWebpack(config) {
    config.plugin('HtmlWebpackPlugin').tap((args) => {
      args[0].inject = false
      args[0].scriptLoading = 'blocking'
      return args
    })
  }
}, false)
```

```ejs
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <%= htmlWebpackPlugin
            .tags
            .bodyTags
            .filter((tag) => /jquery/.test(tag.attributes.src))
            .join('')
    %>
</head>
<body>
<div id="root"></div>
<%= htmlWebpackPlugin
        .tags
        .bodyTags
        .filter((tag) => !(/jquery/.test(tag.attributes.src)))
        .join('')
%>
</body>
</html>
```

- Injects a custom string into the body

```js
const {wcf} = require('@systemlight/webpack-config')

module.exports = wcf({
  port: 8000,
  injectHtml:{content:'<div id="root"></div>', position:'start'}
})
```

## Notice!!!

- If you are developing a library or a multi project repository (monorepo), please note that importing CSS has side
  effects
- Please make sure that the package Remove "sideEffects" in json: false,
- Otherwise, the CSS code block will be lost by the webpack when the production environment is built