从Webpack迁移过来，编译完成后打开浏览器报 Ucaught ReferenceError: require is not defined

mamba-1024 commented 1 year ago

System Info

System: OS: macOS 13.0 CPU: (8) arm64 Apple M1 Memory: 1.87 GB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node Yarn: 1.22.18 - /opt/homebrew/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm Browsers: Chrome: 112.0.5615.49 Edge: 112.0.1722.34 Safari: 16.1 npmPackages: @rspack/cli: latest => 0.1.7 @rspack/plugin-minify: ^0.1.7 => 0.1.7

Details

rspack.config.js 配置项如下：

const path = require('path')

module.exports = {
  devServer: {
        hot: true,
        compress: true,
    },
  mode: 'development',
  context: __dirname,
  entry: {
    main: './src/app.jsx',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  externals: {
    './cptable': 'var cptable',
    "'../' + 'xlsx'": '../xlsx'
  },
  externalsPresets: {
    node: true,
  },
  builtins: {
    html: [{ template: './index.html' }],
    react: {
      development: true,
      refresh: true,
    },
    copy: {
      patterns: [
        {
          from: path.resolve(__dirname, './src/common/editor/ckeditor'),
          to: 'ckeditor',
        },
        { from: path.resolve(__dirname, './src/static'), to: 'static' },
      ],
    },
    pluginImport: [
      {
        libraryName: 'antd',
        style: 'css',
      },
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        type: 'jsx',
      },
      {
        test: /\.ts$/,
        type: 'tsx',
      },
      {
        test: /\.css$/i,
        type: 'css',
      },
      {
        // css-modules
        test: /\.scss$/i,
        type: 'css/module',
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              prependData: '@import "styles/_theme.scss";',
            },
          },
        ],
      },
      { test: /.less$/, use: [{ loader: 'less-loader' }], type: 'css' },
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        type: 'asset',
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
      components: path.resolve(__dirname, './src/components'),
      common: path.resolve(__dirname, './src/common'),
      styles: path.resolve(__dirname, './styles'),
      utils: path.resolve(__dirname, './src/utils'),
      static: path.resolve(__dirname, './src/static'),
    },
    modules: ['node_modules'],
  },
}