0

我正在尝试将 Markdown 文件的目录转换为我可以import()在运行时使用的 javascript 文件。我有一个 webpack 加载器，可以将.mdxmarkdown 文件转换为 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',
          chunks: 'all',
        },
      },
    },
  },
  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 文档的自定义加载程序文件：


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}`
}
4

1 回答 1

0

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

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

它很丑，但现在可以用

于 2020-08-30T22:52:15.477 回答