search

webdeveric / webpack-assets-manifest

This webpack plugin will generate a JSON file that matches the original filename with the hashed version.
https://www.npmjs.com/package/webpack-assets-manifest
MIT License
322 stars 33 forks source link

Entrypoints keys keep `.ts` extension #278

Open josemigallas opened 3 weeks ago

josemigallas commented 3 weeks ago

The problem

I recently moved from webpacker and now need to generate the manifest manually. With the following assets:

login.ts
login.scss

I would expect them to be under the same key login, however the manifest looks like:

"login": {
  "assets": {
    "css": [
      "/packs/css/login-ad7f5b7d.css"
    ]
  }
},
"login.ts": {
  "assets": {
    "js": [
      "/packs/js/login.ts-8def62838e380d68ae02.js"
    ]
  }
},

Is this something that must be customized? Or maybe it's typescript-loader I need to change?

Technical details

Webpack version

webpack@5.92.1
webpack-assets-manifest@5.2.1

Webpack config

{
  mode: 'production',
  entry: {
    /* ... */
    login: '/Users/jgallaso/projects/3scale/porta/app/javascript/packs/login.scss',
    'login.ts': '/Users/jgallaso/projects/3scale/porta/app/javascript/packs/login.ts',
    /* ... */
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: { chunks: 'all' },
    minimize: true,
    minimizer: [ EsbuildPlugin { options: { target: 'es2015', css: true } } ]
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js', '.jsx', '.scss', '.yaml' ],
    modules: [
      '/Users/jgallaso/projects/3scale/porta/app/javascript',
      '/Users/jgallaso/projects/3scale/porta/app/javascript/src',
      'node_modules'
    ]
  },
  resolveLoader: { modules: [ 'node_modules' ] },
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /(.jpg|.jpeg|.png|.gif|.tiff|.ico|.svg|.eot|.otf|.ttf|.woff|.woff2)$/i,
        include: '/Users/jgallaso/projects/3scale/porta/app/javascript',
        type: 'asset/resource',
        generator: { filename: 'static/[hash][ext][query]' }
      },
      {
        test: /\.css$/,
        include: [
          /node_modules\/@patternfly/,
          /node_modules\/jquery-ui/,
          /node_modules\/swagger-ui/
        ],
        use: [
          '/Users/jgallaso/projects/3scale/porta/node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/css-loader/dist/cjs.js',
            options: { sourceMap: true, importLoaders: 2 }
          },
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/esbuild-loader/dist/index.cjs',
            options: { minify: true }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        include: '/Users/jgallaso/projects/3scale/porta/app/javascript',
        use: [
          '/Users/jgallaso/projects/3scale/porta/node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/css-loader/dist/cjs.js',
            options: { sourceMap: true, importLoaders: 2 }
          },
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/sass-loader/dist/cjs.js',
            options: { sassOptions: { includePaths: [ 'app/javascript/src' ] } }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        include: [
          '/Users/jgallaso/projects/3scale/porta/app/javascript',
          '/Users/jgallaso/projects/3scale/porta/app/javascript/src'
        ],
        exclude: [ /node_modules/, /app\/javascript\/src\/Stats/ ],
        use: [
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/esbuild-loader/dist/index.cjs',
            options: { target: 'es2016' }
          }
        ]
      },
      {
        test: /\.js$/,
        include: '/Users/jgallaso/projects/3scale/porta/app/javascript/src/Stats',
        use: [
          {
            loader: '/Users/jgallaso/projects/3scale/porta/node_modules/esbuild-loader/dist/index.cjs',
            options: { loader: 'jsx', target: 'es2016' }
          }
        ]
      },
      {
        test: /\.(ts|tsx)$/,
        include: '/Users/jgallaso/projects/3scale/porta/app/javascript',
        use: 'ts-loader'
      },
      {
        test: /\.ya?ml$/,
        include: '/Users/jgallaso/projects/3scale/porta/app/javascript/src/QuickStarts/templates',
        type: 'json',
        use: [ { loader: 'yaml-loader', options: { asJSON: true } } ]
      }
    ]
  },
  output: {
    filename: 'js/[name]-[contenthash].js',
    chunkFilename: 'js/[name]-[contenthash].chunk.js',
    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
    path: '/Users/jgallaso/projects/3scale/porta/public/packs',
    publicPath: '/packs/'
  },
  plugins: [
    WebpackAssetsManifest {
      hooks: {
        apply: Hook {
          _args: [ 'manifest' ],
          name: undefined,
          taps: [],
          interceptors: [],
          _call: [Function: CALL_DELEGATE],
          call: [Function: CALL_DELEGATE],
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: TAP_ASYNC],
          tapPromise: [Function: TAP_PROMISE],
          constructor: [Function: SyncHook]
        },
        customize: Hook {
          _args: [ 'entry', 'original', 'manifest', 'asset' ],
          name: undefined,
          taps: [],
          interceptors: [],
          _call: [Function: CALL_DELEGATE],
          call: [Function: CALL_DELEGATE],
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: TAP_ASYNC],
          tapPromise: [Function: TAP_PROMISE],
          constructor: [Function: SyncWaterfallHook]
        },
        transform: Hook {
          _args: [ 'assets', 'manifest' ],
          name: undefined,
          taps: [
            {
              type: 'sync',
              fn: [Function (anonymous)],
              name: 'WebpackAssetsManifest'
            }
          ],
          interceptors: [],
          _call: [Function: CALL_DELEGATE],
          call: [Function: CALL_DELEGATE],
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: TAP_ASYNC],
          tapPromise: [Function: TAP_PROMISE],
          constructor: [Function: SyncWaterfallHook]
        },
        done: Hook {
          _args: [ 'manifest', 'stats' ],
          name: undefined,
          taps: [],
          interceptors: [],
          _call: undefined,
          call: undefined,
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: tapAsync],
          tapPromise: [Function: tapPromise],
          constructor: [Function: AsyncSeriesHook]
        },
        options: Hook {
          _args: [ 'options' ],
          name: undefined,
          taps: [],
          interceptors: [],
          _call: [Function: CALL_DELEGATE],
          call: [Function: CALL_DELEGATE],
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: TAP_ASYNC],
          tapPromise: [Function: TAP_PROMISE],
          constructor: [Function: SyncWaterfallHook]
        },
        afterOptions: Hook {
          _args: [ 'options', 'manifest' ],
          name: undefined,
          taps: [
            {
              type: 'sync',
              fn: [Function (anonymous)],
              name: 'WebpackAssetsManifest'
            }
          ],
          interceptors: [],
          _call: [Function: CALL_DELEGATE],
          call: [Function: CALL_DELEGATE],
          _callAsync: [Function: CALL_ASYNC_DELEGATE],
          callAsync: [Function: CALL_ASYNC_DELEGATE],
          _promise: [Function: PROMISE_DELEGATE],
          promise: [Function: PROMISE_DELEGATE],
          _x: undefined,
          compile: [Function: COMPILE],
          tap: [Function: tap],
          tapAsync: [Function: TAP_ASYNC],
          tapPromise: [Function: TAP_PROMISE],
          constructor: [Function: SyncHook]
        }
      },
      options: {
        enabled: true,
        assets: [Object: null prototype] {},
        output: 'manifest.json',
        replacer: null,
        space: 2,
        writeToDisk: true,
        fileExtRegex: /\.\w{2,4}\.(?:map|gz|br)$|\.\w+$/i,
        sortManifest: true,
        merge: false,
        publicPath: true,
        contextRelativeKeys: true,
        apply: null,
        customize: null,
        transform: null,
        done: null,
        entrypoints: true,
        entrypointsKey: 'entrypoints',
        entrypointsUseAssets: true,
        integrity: false,
        integrityHashes: [ 'sha256', 'sha384', 'sha512' ],
        integrityPropertyName: 'integrity',
        extra: [Object: null prototype] {}
      },
      assets: [Object: null prototype] {},
      assetNames: Map(0) {},
      currentAsset: null,
      compiler: null,
      [Symbol(isMerging)]: false
    },
    WebpackRemoveEmptyScriptsPlugin {
      outputPath: '',
      trash: [],
      apply: [Function: bound apply],
      options: {
        enabled: true,
        verbose: false,
        extensions: /.(css|scss|sass|less|styl)([?].*)?$/,
        ignore: [],
        remove: /\.(js|mjs)$/,
        stage: 100
      },
      enabled: true,
      verbose: false
    },
    MiniCssExtractPlugin {
      _sortedModulesCache: WeakMap { <items unknown> },
      options: {
        filename: 'css/[name]-[contenthash:8].css',
        ignoreOrder: false,
        experimentalUseImportModule: undefined,
        runtime: true,
        chunkFilename: 'css/[id]-[contenthash:8].css'
      },
      runtimeOptions: {
        insert: undefined,
        linkType: 'text/css',
        attributes: undefined
      }
    },
    CompressionPlugin {
      options: {
        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
        include: undefined,
        exclude: undefined,
        algorithm: 'gzip',
        compressionOptions: { level: 9 },
        filename: '[path][base].gz[query]',
        threshold: 0,
        minRatio: 0.8,
        deleteOriginalAssets: false
      },
      algorithm: [Function: asyncBufferWrapper]
    }
  ],
  devtool: 'source-map',
  stats: 'normal',
  bail: true
}

Operating system

macOS Sonoma

webdeveric commented 3 weeks ago

@josemigallas Have you tried the customize hook?