Блог

Я только что обновился до webpack 5 .

Это мой webpack.config.ts :

 import * as path from "path";
import * as webpack from "webpack";

const config: webpack.Configuration = {

  mode: "production",

  devtool: false,

  output: {
    filename: "[name].[contenthash:5].js",
    path: path.resolve(__dirname, "public"),
    publicPath: "/"
  },
  
  entry: {
    app: "./src/index.tsx"
  },

  module: {
    rules:[{
      test: /.(js|jsx|ts|tsx)$/,
      include: path.resolve(__dirname, "src"),
      use: ["babel-loader"]
    }]
  },

  plugins: [
    new HtmlWebpackPlugin({ ... })
  ],

  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        defaultVendors: {
          filename: `vendors.[contenthash:5].js`
        }
      }
    }
  }
}
 

Это довольно стандартно.

Это вывод пакета:

Все имеет смысл. Это то, что мы имеем:

• runtime Фрагмент. Из runtimeChunk: "single" опции
• vendors Фрагмент. Из defaultVendors cacheGroup
• app Фрагмент, начиная с точки app: "./src/index.tsx" входа

Но есть и другие журналы, которые я не понимаю:

потерянные модули

webpack Почему так много модулей обнаруживается как потерянные? Общее количество файлов в моей src папке составляет около ~ 500. Вероятно, там есть несколько потерянных файлов, но я уверен, что большинство из них ни в коем случае не следует считать потерянными, поскольку они используются во всем коде приложения.

Это их определение для потерянных модулей: