Webpack生产构建出现Unexpected token错误，请求技术支持

Hey there, I know how frustrating it is to hit a wall with Webpack production builds after trying everything—let’s dig into this based on the partial config you shared and common pitfalls with the plugins you’re using.

First, let’s address the biggest red flag in your config #

You’re using ExtractTextPlugin, which is deprecated for Webpack 4 and above. This plugin hasn’t been updated to support modern Webpack features, and it’s almost certainly causing conflicts or build failures in production mode. The replacement is mini-css-extract-plugin, which is maintained and optimized for newer Webpack versions.

Let’s fix that first, then tackle other common issues #

Here’s a revised snippet of your config with the deprecated plugin swapped out, plus production-mode best practices:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Replace ExtractTextPlugin with MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
// Make sure you fully import this plugin (your snippet cut off!)
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

module.exports = {
  // Critical: Always set production mode for optimized builds
  mode: 'production',
  entry: './src/index.js', // Update this to your actual entry file
  output: {
    path: path.resolve(__dirname, 'dist'),
    // Use content hashes for long-term caching
    filename: '[name].[contenthash].js',
    // Webpack 5+: Auto-clean the dist folder on build
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // Replace ExtractTextPlugin's use array with this
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      // Add your other loaders (Babel, file loaders, etc.) here
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Update to your template path
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new PreloadWebpackPlugin({
      rel: 'preload',
      // Correctly map asset types for preloading
      as(entry) {
        if (/\.css$/.test(entry)) return 'style';
        if (/\.woff2?$/.test(entry)) return 'font';
        return 'script';
      },
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer', // Optimize script loading
    }),
  ],
  // Production optimization for code splitting and caching
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: 'single',
  },
};

Next, let’s troubleshoot other potential issues #

• Incomplete plugin imports: Your config cuts off at ScriptExtHtmlWeb...—make sure you’ve fully imported script-ext-html-webpack-plugin and that it’s installed via npm/yarn. A missing import will throw a "module not found" error.
• Plugin version conflicts: Double-check that all your plugins are compatible with your Webpack version. For example:
  • If you’re on Webpack 5, use html-webpack-plugin@^5.0.0, mini-css-extract-plugin@^2.0.0, and preload-webpack-plugin@^3.0.0
  • Run npm ls webpack to see your dependency tree and spot any mismatched versions
• Missing error details: The partial error message you mentioned is key—if you can share the full error stack trace, we can pinpoint exactly where things are breaking (e.g., is it a loader error, a plugin conflict, or a missing module?).
• Incremental testing: Try removing plugins one by one (start with PreloadWebpackPlugin and ScriptExtHtmlWebpackPlugin) to see if the build succeeds. This will help you isolate which plugin is causing the failure.

Quick final checks #

• Make sure you’ve installed all plugins with npm install --save-dev [plugin-name]
• Avoid mixing deprecated plugins with modern ones (like ExtractTextPlugin alongside mini-css-extract-plugin)
• Ensure your package.json has a valid build script: "build": "webpack --config webpack.prod.js"

内容的提问来源于stack exchange，提问作者Gustavo Yance