Webpack4+AOT懒加载下ExtractTextWebpackPlugin提取Less构建挂起求助

Let's tackle your two core problems one by one—they're mostly caused by version incompatibilities and outdated plugin choices for Webpack 4:

1. Module Count >8 AOT Compilation Failure #

Your biggest issue here is a version mismatch between Angular and @ngtools/webpack:

• You're using Angular 5.2.9, but @ngtools/webpack 6.0.0-rc.5 is built for Angular 6+. This creates critical conflicts during AOT compilation, especially when handling lazy-loaded modules.

Fix: #

Update your package.json to use the correct @ngtools/webpack version that matches Angular 5:

"devDependencies": {
  // ... keep other dependencies
  "@ngtools/webpack": "5.2.1"
}

Then re-install dependencies to apply the change:

npm install

2. ExtractTextWebpackPlugin Stuck at 70% #

ExtractTextPlugin is not recommended for Webpack 4—it has known bugs with asynchronous asset processing and lazy loading, which causes the unresponsive build. Webpack 4's official replacement is mini-css-extract-plugin, which you already have in your devDependencies.

Fix: #

Modify your webpack.config.js to replace ExtractTextPlugin with MiniCssExtractPlugin:

Step 1: Update the plugin import

Replace the ExtractTextPlugin import with:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Step 2: Fix the LESS loader rule

Remove the ExtractTextPlugin wrapper and use MiniCssExtractPlugin's loader instead. Also, remove redundant to-string-loader (not needed for CSS extraction):

{
  test: /\.less$/,
  exclude: helpers.root('node_modules', 'app'),
  use: [
    isProd ? MiniCssExtractPlugin.loader : 'style-loader', // Use style-loader for dev hot reloading
    'css-loader',
    'less-loader'
  ]
}

Step 3: Update plugins array

Replace the ExtractTextPlugin instance with MiniCssExtractPlugin:

plugins: [
  // ... keep other plugins
  new MiniCssExtractPlugin({
    filename: './assets/[name].css'
  }),
  // ... rest of your plugins
]

3. Additional Optimizations to Prevent Future Issues #

• Clean up redundant loaders: Your config has overlapping loaders like css-to-string-loader and iso-morphic-style-loader (unless you're building an isomorphic app, you don't need this). Simplify style handling to avoid conflicts.
• Verify tsconfig.json: Ensure your Angular compiler options are correct for AOT:

  {
    "angularCompilerOptions": {
      "skipMetadataEmit": true,
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true,
      "enableIvy": false // Angular 5 does not support Ivy
    }
  }
  

• Check lazy loading syntax: Ensure your route configuration uses the correct AOT-compatible syntax:

  {
    path: 'lazy',
    loadChildren: './lazy/lazy.module#LazyModule' // Relative path + #ModuleName format
  }
  

Final Steps #

1. Delete your node_modules folder and package-lock.json to clear cached dependencies
2. Run npm install to get fresh, compatible packages
3. Test your build again—both the module count limit and the hang issue should be resolved.

内容的提问来源于stack exchange，提问作者sarju kabariya