@cs-magic/webpack-config NPM

@cs-magic/webpack-config

CS Magic 项目的共享 Webpack 配置。

安装

npm install --save-dev @cs-magic/webpack-config

使用

基础配置

// webpack.config.js
const getWebpackConfig = require('@cs-magic/webpack-config')

module.exports = getWebpackConfig({
  development: process.env.NODE_ENV === 'development',
  production: process.env.NODE_ENV === 'production',
})

React + TypeScript 项目

// webpack.config.js
const getWebpackConfig = require('@cs-magic/webpack-config')

module.exports = getWebpackConfig({
  development: process.env.NODE_ENV === 'development',
  production: process.env.NODE_ENV === 'production',
  react: true,
  typescript: true,
})

自定义配置

// webpack.config.js
const { merge } = require('webpack-merge')
const getWebpackConfig = require('@cs-magic/webpack-config')

const customConfig = {
  // 你的自定义配置
}

module.exports = env => merge(getWebpackConfig(env), customConfig)

特性

开发环境优化
- 热模块替换
- Source Maps
- 开发服务器配置
生产环境优化
- 代码分割
- 压缩和混淆
- CSS 提取和优化
- Bundle 分析
资源处理
- JavaScript/TypeScript
- CSS/SASS
- 图片和字体
- CSS Modules
React 支持
- 热重载
- JSX/TSX 支持
TypeScript 支持
- 类型检查
- 编译优化

命令

{
  "scripts": {
    "start": "webpack serve --env development",
    "build": "webpack --env production",
    "analyze": "ANALYZE=true webpack --env production"
  }
}

环境变量

NODE_ENV: 决定构建模式
ANALYZE: 开启 bundle 分析

扩展配置

添加新的 loader

const config = getWebpackConfig({ development: true })

config.module.rules.push({
  test: /\.mdx?$/,
  use: ['babel-loader', '@mdx-js/loader'],
})

添加新的插件

const config = getWebpackConfig({ production: true })
const CompressionPlugin = require('compression-webpack-plugin')

config.plugins.push(new CompressionPlugin())

Next.js Integration

For Next.js projects, we provide a webpack config modifier that works with Next.js's webpack configuration:

// next.config.js
const { withCustomWebpack } = require('@cs-magic/webpack-config/presets/webpack.nextjs')

const nextConfig = {
  reactStrictMode: true,
  // Your other Next.js config
}

module.exports = withCustomWebpack(nextConfig)

Features

Custom aliases (@, @components, etc.)
SVG support via @svgr/webpack
Optimized chunk splitting
Worker loader support
Development environment variable
Module transpilation support
Production optimizations

Environment Variables

The config automatically adds:

__DEV__: boolean indicating development mode

Custom Webpack Configuration

You can still add your own webpack configuration:

const nextConfig = {
  webpack: (config, options) => {
    // Your custom webpack modifications
    return config
  }
}

module.exports = withCustomWebpack(nextConfig)

Chrome Extension Configuration

为 Chrome 扩展项目提供特定的 webpack 配置：

// webpack.config.js
const getWebpackConfig = require('@cs-magic/webpack-config/presets/webpack.chrome')

module.exports = (env) => {
  return getWebpackConfig({
    development: process.env.NODE_ENV === 'development'
  })
}

项目结构

推荐的项目结构：

src/
├── manifest.json
├── background/
│   └── index.ts
├── content/
│   └── index.ts
├── popup/
│   ├── index.tsx
│   └── popup.html
├── options/
│   ├── index.tsx
│   └── options.html
├── components/
│   └── shared/
├── assets/
│   └── icons/
└── utils/

特性

Manifest V3 支持
TypeScript 支持
React 支持
样式处理 (CSS/SCSS)
资源处理
代码分割
热重载
开发环境优化

构建命令

在 package.json 中添加：

{
  "scripts": {
    "dev": "webpack --watch --mode development --env development",
    "build": "webpack --mode production --env production",
    "clean": "rimraf dist"
  }
}