Webpack打包文件判定规则及资源目录部分文件未打包问题咨询

First off, Webpack works entirely based on a dependency graph—it doesn’t just scan your entire project folder automatically. Here’s the step-by-step logic behind what gets included:

• Entry Points: It starts with the entry file(s) you define in webpack.config.js (or the default src/index.js if you don’t specify one). This is the root of your dependency tree.
• Dependency Scanning: From the entry point, Webpack recursively parses every import, require, or dynamic import() statement. It also picks up dependencies from other files, like CSS @import or url() references. Any file that’s part of this chain gets added to the bundle.
• Loader Rules: Your module.rules config tells Webpack how to process different file types (e.g., CSS, images), but this only applies to files already in the dependency graph. If a file isn’t referenced anywhere, Webpack doesn’t even know it exists.
• Plugins (Exceptions): Some plugins like CopyWebpackPlugin let you manually copy files that aren’t in the dependency graph, but this is an add-on, not Webpack’s core behavior.

Let’s break down why your other files are missing:

1. i18n.js is part of the dependency graph #

Chances are, you’re importing i18n.js somewhere in your entry file or another referenced file (e.g., import './src/main/resources/i18n.js'). That’s why Webpack picks it up and includes it in the bundle.

2. index.html isn’t being processed #

Webpack doesn’t handle HTML files by default. To get it included (and have your bundled JS/CSS injected into it), you need to use the html-webpack-plugin:

• Install it: npm install html-webpack-plugin --save-dev
• Add this to your webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... your existing config
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/main/resources/index.html' // Path to your HTML template
    })
  ]
};

This plugin will generate a new HTML file (using your template) and automatically add script/link tags for your bundled assets.

3. myproject.css is either unreferenced or missing loader config #

There are two likely issues here:

• You’re not importing it: If no JS file has import './src/main/resources/myproject.css', Webpack has no way to know it exists. Add that import to your entry file or a relevant component.
• No CSS loaders configured: Even if you import it, Webpack needs loaders to process CSS. Install the necessary loaders and add a rule:
  • Install: npm install css-loader style-loader --save-dev (use mini-css-extract-plugin instead if you want a separate CSS file)
  • Add to webpack.config.js:

  module.exports = {
    // ... your existing config
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'] // Order matters: right to left execution
        }
      ]
    }
  };
  

Bonus: Copying unreferenced static files #

If you have files you want to include without importing them (like static assets), use CopyWebpackPlugin:

• Install: npm install copy-webpack-plugin --save-dev
• Add to your config:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... your existing config
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { 
          from: './src/main/resources', 
          to: './', 
          globOptions: { ignore: ['**/i18n.js'] } // Skip i18n since it's already bundled
        }
      ]
    })
  ]
};

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