NextJs Webpack - 导入另一个 NextJs 项目 B 作为 NextJs 项目 A 中的模块/框架

Question

我创建了一个 NextJs 项目 B 作为一个独立的模块/框架，它将使用 Webpack 将组件/gui 和 css/scss 文件捆绑为bundle.js。

在 NextJs 项目 A 中安装上述内容，期望项目 A 的通用 css 样式覆盖项目 B 的 css 样式，如果不使用默认项目 B css 样式。

到目前为止我所取得的成就是与项目 B 创建捆绑包。但是，我遇到了 2 个问题

Q1) 如何将项目 B 的组件导入到项目 A 中？ Q2）我在构建日志中收到此警告？

这是我的 webpack.development.config.js，我使用以下方法通过 package.json 调用它：

"scripts": {
    "dev": "next dev",
    "build": "webpack --config webpack.development.config.js --stats detailed",
    "start": "next start",
    "lint": "next lint"
  },

webpack.development.config.js：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve('./dist'),
  },
  mode: 'development',
  resolve: {
    extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
  },
  module: {

        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: {
                  publicPath: (resourcePath, context) => {
                    return path.relative(path.dirname(resourcePath), context) + "/";
                  },
                },
                options: {
                  esModule: true,
                  modules: {
                    namedExport: true,
                    localIdentName: "[name]__[contenthash]__[local]",
                  },
                  importLoaders: 1,
                },
              },
            ],
            include: /\.module\.css$/,
          },
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader, 'css-loader',
            ],
            exclude: /\.module\.css$/,
          },
          {
            test: /\.scss$/,
            use: [
              MiniCssExtractPlugin.loader, 
              {
                loader: 'css-loader',
                options: {
                  publicPath: (resourcePath, context) => {
                    return path.relative(path.dirname(resourcePath), context) + "/";
                  },
                },
                options: {
                  esModule: true,
                  modules: {
                    namedExport: true,
                    localIdentName: "[name]__[contenthash]__[local]",    
                  },
                  importLoaders: 1,
                },
              },
              'sass-loader'
            ],
            include: /\.module\.scss$/,
          },
          {
            test: /\.scss$/,
            use: [
              MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
            ],
            exclude: /\.module\.scss$/,
          },
          {
            test: /\.ts$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [ '@babel/env' ],
              }
            }
          },
          {
            test: /\.tsx$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [ '@babel/env', '@babel/typescript', '@babel/preset-react' ],
              }
            }
          },
        ],

  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
}

Answer 1

从上面回答我自己的问题，创建一个单独的webpack配置文件，而不是修改项目A或要安装项目B作为依赖的项目中现有的next.config.mjs。我正在使用 Next.JS 版本 14.2.12。

这里是 next.config.mjs 的脚本：

import transpileModules from 'next-transpile-modules';
import path from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

/** @type {import('next').NextConfig} */
const nextConfig = transpileModules(['@namespace/helloworld-framework-1'])({
  
  webpack: (config) => {
    // Add custom loader for .tsx files
    config.module.rules.push({
      test: /\.tsx?$/, // For .ts and .tsx files
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'], // Use Next.js Babel preset
          },
        },
      ],
    });

    // Add custom loader for .scss files
    config.module.rules.push({
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            publicPath: (resourcePath, context) => {
              return path.relative(path.dirname(resourcePath), context) + "/";
            },
          },
          options: {
            esModule: true,
            modules: {
              namedExport: true,
              localIdentName: "[name]__[contenthash]__[local]",
            },
            importLoaders: 1,
          },
        },
      ],
      include: /\.module\.css$/,
    });

    config.module.rules.push({
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader, 'css-loader',
      ],
      exclude: /\.module\.css$/,
    });

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader, 
        {
          loader: 'css-loader',
          options: {
            publicPath: (resourcePath, context) => {
              return path.relative(path.dirname(resourcePath), context) + "/";
            },
          },
          options: {
            esModule: true,
            modules: {
              namedExport: true,
              localIdentName: "[name]__[contenthash]__[local]",    
            },
            importLoaders: 1,
          },
        },
        'sass-loader'
      ],
      include: /\.module\.scss$/,
    });

    config.module.rules.push({
      test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
        ],
        exclude: /\.module\.scss$/,
    });

    // Add MiniCssExtractPlugin to the Webpack plugins array
    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash].css',
        chunkFilename: 'static/css/[id].[contenthash].css',
      })
    );

    return config;
  },
});

export default nextConfig;

在项目 B 中只需运行默认的 npm run dev，无需任何配置，将其推送到 npm 上并安装在项目 A 中。