webpack - Chrome 的覆盖选项卡显示我的图书馆

Question

我有我的 nextjs 项目，它使用np-design. 我发现当我在 DevTools 中看到 Coverage 选项卡并单击刷新时，我的结果出乎意料np-design。

我希望这些将与其他库一起包含在一个块中，但事实并非如此。

为什么会这样？有没有办法不在 Coverage 选项卡中显示我的图书馆？

const path = require('path')
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

module.exports = {
  entry: './src',
  context: path.resolve(__dirname),
  resolve: {
    modules: ['node_modules'],
    symlinks: true,
    extensions: ['.js', '.ts', '.tsx', 'jsx'],
  },
  target: 'node',
  externals: ['react', 'react-dom'],
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'index.js',
    libraryTarget: 'umd',
  },
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  plugins: [
    new ExtractCssChunks({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx|jsx)$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
          options: {
            rootMode: 'upward',
          },
        },
      },
      {
        test: /\.md$/,
        exclude: /node_modules/,
        use: {
          loader: 'raw-loader',
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [new ExtractCssChunks()],
}

标签： webpackgoogle-chrome-devtools