angularjs - angularjs 与 webpack 5 自动重新编译

Question

那里！

我有一个在 webpack 5 上运行的 AngularJS 应用程序。一切正常，编译顺利，一切都在它应该在的地方。唯一的问题是 webpack 不断地重新编译。如果说，2 或 3 分钟过去了，我打开或关闭一个新文件或在整个项目中搜索一个文件（通过 ctrl + shift + f，我正在使用 vscode），webpack 只是再次编译。

因为我在做一个非常大的项目，所以很烦人，因为我花了很多时间尝试，然后，当点击 vscode 时，整个应用程序重新编译，这需要几秒钟的时间...

这是我的 webpack.config.js。由于公司限制，条目已被替换为***。

require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = (env) => ({
  mode: (env.production)
    ? 'production'
    : 'development',
  entry: '***',
  output: {
    filename: 'bundle-[contenthash].js',
    path: path.resolve(__dirname, 'dist/app'),
    clean: true
  },
  externals: {
    // src/assets contains lazy-loaded assets that should not
    // be bundled.
    assets: path.resolve(__dirname, 'src', 'assets')
  },
  optimization: {
    minimize: false,

    minimizer: [
      new TerserPlugin({
        exclude: /assets/,
        extractComments: false
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /(node_modules|bower_components)/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: 'html-loader'
      },
      {
        test: /src\/app\/.*\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /src\/.*\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              sourceMaps: !env.production,
              cacheDirectory: true,
              cacheCompression: false
            }
          },
          ...(
            (env.production)
              ? []
              : [{ loader: 'source-map-loader' }]
          )
        ],
        exclude: [/(node_modules|bower_components)/]
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
              lessOptions: {
                relativeUrls: false,
                paths: [
                  path.resolve(__dirname, 'node_modules'),
                  path.resolve(__dirname, 'bower_components'),
                  'app/less'
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              onlyCompileBundledFiles: true
            }
          }
        ],
        exclude: [/node_modules/, /test/]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: path.resolve(__dirname, 'dist/index.html'),
      publicPath: 'app',
      favicon: './src/favicon.ico'
    }),

    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets')
        },
        {
          from: '**/*.html',
          context: 'src/app'
        },
        {
          from: '(node_modules|bower_components)/**/*.(eot|ttf|woff|woff2)',
          to: path.resolve(__dirname, 'dist', 'fonts', '[name][ext]')
        }
      ]
    })
  ],
  devServer: {
    port: 3000,
    host: '0.0.0.0',
    publicPath: '/',
    contentBase: 'dist',
    writeToDisk: true
  },
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: 'tsconfig.json',
        extensions: ['.ts', '.js'],
        mainFields: ['browser', 'main']
      })
    ]
  },
  ...(
    (env.production)
      ? {}
      : { devtool: 'eval-source-map' }
  )
});

标签： angularjswebpack