webpack不会将进入点拆分为单独的输出文件的代码

问题描述

我正在尝试将Markdown文件目录转换为javascript文件，我可以在运行时import()。我有一个webpack加载程序，它将.mdx降价文件转换为JSX（然后使用babel将jsx转换为js）。

当前，它们都以单个块的形式发出，我不知道如何将它们拆分为单独的文件。我尝试了几种不同的方法来玩optimization.splitChunks.cacheGroups，但都无济于事。

我的webpack配置如下：

const path = require('path')
const { promisify } = require('util')
const { Glob } = require('glob')

const { NODE_ENV = 'development' } = process.env
const devMode = process.env.NODE_ENV !== 'production'

const glob = promisify(Glob)

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        mdx: {
          test: /\/content\//,name: 'content',chunks: 'all',},vendor: {
          test: /\/node_modules\//,name: 'vendor',entry: async () => ({
    main: './src/client/index',content: await glob('./content/**/*.mdx',{ dot: devMode }),}),module: {
    rules: [
      {
        test: /\.mdx?$/,use: [
          'babel-loader','@mdx-js/loader',path.resolve('./lib/mdxLoader'),],{ test: /\.[jt]sx?$/,exclude: /node_modules/,use: 'babel-loader' },{ test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader'] },output: { filename: '[name]-[contentHash:8].js',chunkFilename: '[name]-[contentHash:8].js' },mode: NODE_ENV,name: 'client',resolve: { extensions: ['.ts','.tsx','.js','.jsx'] },plugins: [new MiniCssExtractPlugin({ filename: '[name]-[contentHash:8].css' })],} // attempted to order keys relative to the problem

和来自mdx docs的自定义加载程序文件：

const matter = require('gray-matter')
const stringifyObject = require('stringify-object')

module.exports = async function mdxLoader(src) {
  const { content,data } = matter(src)
  return `export const metadata = ${stringifyObject(data)};\n\n${content}`
}

解决方法

通过更改入口点以使用文件名作为键来解决：

  entry: async () => ({
    main: './src/client/index',...(await glob('./content/**/*.mdx',{ dot: devMode }))
      .reduce((o,k) => {
        o[k.replace(/\.mdx?$/,'')] = k
        return o
      },{}),}),

这很丑，但现在可以使用