# moga-app-base-webpack-config

> Basic webpack configuration used by Moga application

Latest version **2.0.0** (published 2023-07-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install moga-app-base-webpack-config
pnpm add moga-app-base-webpack-config
yarn add moga-app-base-webpack-config
bun add moga-app-base-webpack-config
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-07-04 |
| First published | 2023-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cubber |

## Links

- npm: https://www.npmjs.com/package/moga-app-base-webpack-config
- Repository: https://github.com/render-ydb/moga-app-base-webpack-config
- Homepage: https://github.com/render-ydb/moga-app-base-webpack-config#readme
- Issues: https://github.com/render-ydb/moga-app-base-webpack-config/issues
- npm.io page: https://npm.io/package/moga-app-base-webpack-config

## Dependencies (19)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [webpack](https://npm.io/package/webpack.md) ^5.78.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.7.3
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.1
- [webpackbar](https://npm.io/package/webpackbar.md) ^5.0.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.22.5
- [less-loader](https://npm.io/package/less-loader.md) ^11.1.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^13.2.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.1.2
- [react-refresh](https://npm.io/package/react-refresh.md) ^0.14.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.2.4
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.22.5
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.22.5
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.7
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.7.5
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.22.5
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^5.0.0
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) ^2.4.0
- [@pmmmwh/react-refresh-webpack-plugin](https://npm.io/package/@pmmmwh/react-refresh-webpack-plugin.md) ^0.5.10

## Recent versions

- 2.0.0 (latest) — 2023-07-04
- 0.0.1-beta.9 (beta) — 2023-06-15
- 1.0.0 — 2023-06-19
- 0.0.1-beta.8 — 2023-06-13
- 0.0.1-beta.4 — 2023-06-13
- 0.0.1-beta.3 — 2023-06-12
- 0.0.1-beta.2 — 2023-06-12
- 0.0.1-beta.1 — 2023-06-12

## README

# moga-app-base-webpack-config
Basic webpack configuration used by Moga application

## 介绍
moga-app-base-webpack-config是用于构建Moga App的基础webpack配置，其内部使用webpack-chain实现。

除此之外，moga-app-base-webpack-config还提供了react编译所需的babel配置。

## API
moga-app-base-webpack-config对外提供如下API，使用该API就可以得到对应的基础配置：

1. getBabelConfig 得到react相关的babel配置
2. getWebpackConfig 得到基础的webpack配置

### getBabelConfig
getBabelConfig的实现如下，可以看到具体的babel配置：

```javascript
export = (isEnvDevelopment = false) => {
  return {
    presets: [
      [require.resolve('@babel/preset-env'), {}],
      [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
      require.resolve('@babel/preset-typescript'),
    ],
    plugins: [
      true
      && isEnvDevelopment
      && require.resolve('react-refresh/babel'),
    ].filter(Boolean),
    babelrc: false,
    configFile: false,
  };
};

```
### getWebpackConfig
getWebpackConfig的实现如下：
```javascript
import getBaseConfig = require('./webpack.base');
import getBuildConfig = require('./webpack.build');
import getDevConfig = require('./webpack.dev');
import { Config, Mode } from '../../types';

export = (mode: Mode = 'development', config: Config) => {
  getBaseConfig(mode, config);
  if (mode === 'development') {
    getDevConfig(config);
  } else {
    getBuildConfig(config);
  }
  return config;
};

```
根据mode的值可以获取开发、生产环境下的配置。

#### 基础配置
开发和生产环境下公用的配置如下：
1. resolve中extensions的配置：['.js', '.json', '.jsx', '.ts', '.tsx']
2. 对css、css module、less、sass、字体、等其他资源的处理
3. 对(js|mjs|jsx|ts|tsx)类型文件的babel配置处理

#### 开发环境配置
开发环境在基础配置上增加如下配置：
1. soure map: cheap-module-source-map
2. react热更新支持

#### 生产环境配置
生产环境在基础配置上增加如下配置：
1. optimization配置，对js和css资源压缩和其他优化

更多配置，请阅读[moga-app-base-webpack-config](https://github.com/render-ydb/moga-app-base-webpack-config.git)，其实现并不难。

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