Webpack 3报错：无法解析文件或目录，自定义模板升级遇阻求助

Hey there! I’ve helped tons of developers work through Webpack version upgrades, so let’s break down how to fix this resolution error you’re hitting after moving from Webpack 1 to 3. Since you’re building a custom template (no pre-built solutions needed here), let’s focus on the specific changes that trip people up with resolve.extensions and related config.

Key Changes from Webpack 1 to 3 for Resolution #

First, let’s clarify the big one: Webpack 3 completely dropped support for empty strings in resolve.extensions. In Webpack 1, you might have had something like:

// Old Webpack 1 config
resolve: {
  extensions: ['', '.js', '.jsx']
}

This let you import files without specifying extensions, but Webpack 3 removed the empty string because it led to ambiguous resolution. Instead, Webpack 3 expects you to list all extensions you want to auto-resolve, in priority order.

Step-by-Step Fixes #

• Update resolve.extensions with explicit extensions
  Replace that empty string with every file extension your project uses, ordered by how often you use them. For example:

  // Webpack 3+ config
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.scss']
  }
  

  Note: Webpack 3 includes .json by default, but it’s still safe to list it explicitly to avoid surprises.

• Verify your import paths match file extensions
  If you’re importing a file like import Header from './Header' and the actual file is Header.jsx, make sure .jsx is in your extensions list. Webpack 3 won’t guess extensions you don’t explicitly list.

• Check resolve.modules to ensure Webpack looks in the right places
  Sometimes the error isn’t about extensions—it’s that Webpack can’t find your files at all. Add your source directory to resolve.modules so Webpack knows to look there first (before node_modules):

  const path = require('path');
  
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx']
  }
  

• Fix case sensitivity issues
  Webpack 3 is stricter about filename case than Webpack 1. If you’re on a macOS or Linux machine, importing ./header when the file is Header.js will fail. Double-check that your import paths match the exact case of your files.

• Debug with detailed error output
  Run Webpack with the --display-resolve-error-details flag to get more context:

  webpack --display-resolve-error-details
  

  This will show you every path Webpack tried to resolve, which makes it easy to spot if it’s missing an extension or looking in the wrong directory.

• Optional: Use resolve.alias for complex paths
  If your custom template has nested directories, aliases can reduce path typos. For example:

  resolve: {
    alias: {
      '@templates': path.resolve(__dirname, 'src/templates'),
      '@utils': path.resolve(__dirname, 'src/utils')
    },
    extensions: ['.js', '.jsx']
  }
  

  Now you can import files like import Layout from '@templates/Layout' instead of messy relative paths.

Final Notes #

Since your Webpack 1 setup worked fine, the issue is almost certainly tied to the removal of the empty string in resolve.extensions or a related resolution config change. Work through the steps above, and you should be able to get your custom template building with Webpack 3 in no time.

内容的提问来源于stack exchange，提问作者Omar Awamry