Next. js и Ресурсы Webpack Javascript или CSS - PullRequest
Новая
       35

Next. js и Ресурсы Webpack Javascript или CSS

0 голосов
/ 25 февраля 2020

У меня есть следующий вариант использования: мне нужно сгенерировать stati c файлы с помощью React и Next. js. Для этого я расширил файл next.config. js следующим содержанием: 

module.exports = {
  exportTrailingSlash: true,
  exportPathMap: async function () {
    const paths = {
      '/': { page: '/' }
    }
    const errorPages = [
      { id: 1, name: '404', lang: 'en' },
      { id: 2, name: '500', lang: 'en' }
    ]

    errorPages.forEach(errorPage => {
      paths[`/errorPage/${errorPage.id}`] = {
        page: '/errorPage/[id]',
        query: { id: errorPage.id }
      }
    })

    return paths
  },
}

Это полностью работает. Файлы генерируются в папке out после npm export

. Тем не менее, существует еще один вариант использования: файл index. html должен работать везде, а не только в том месте, в котором он находится в папке out. Например, другое веб-приложение запрашивает API, который сканирует индекс. html и возвращает html в виде строки из этого файла. Эта строка hrml должна работать, но ссылки на js файлы / комплекты являются относительными (см. Теги ссылок и сценариев): 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <meta name="next-head-count" content="2" />
    <link
      rel="preload"
      href="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/runtime/webpack-91b117697e716c22a78b.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/framework.94bc9fd9a7de53a90996.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/commons.6419ced117edf62014da.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js"
      as="script"
    />
  </head>
  <body>
    <div id="__next">
      <div style="margin:20px;padding:20px;border:1px solid #DDD">
        <h1>Error Pages</h1>
        <ul>
          <li><a href="/errorPage/1/">test a</a></li>
          <li><a href="/errorPage/2/">test 2</a></li>
        </ul>
      </div>
    </div>    
    <script
      nomodule=""
      src="/_next/static/runtime/polyfills-2889d9d9fcf08314dd3a.js"
    ></script>
    <script
      async=""
      data-next-page="/"
      src="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js"
    ></script>
    <script
      async=""
      data-next-page="/_app"
      src="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js"
    ></script>
    <script
      src="/_next/static/runtime/webpack-91b117697e716c22a78b.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/framework.94bc9fd9a7de53a90996.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/commons.6419ced117edf62014da.js"
      async=""
    ></script>
    <script
      src="/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js"
      async=""
    ></script>
    <script
      src="/_next/static/UkokJ2QynwMCza2ya8Vuz/_buildManifest.js"
      async=""
    ></script>
  </body>
</html>

Есть ли способ указать следующее, чтобы включить это js встроенные файлы?

Что я пытался:

Я пытаюсь использовать HtmlWebpackPlugin и HtmlWebpackInlineSourcePlugin и обновил next.config. js, например, так: 

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

module.exports = {
  exportTrailingSlash: true,
  exportPathMap: async function () {
    const paths = {
      '/': { page: '/' }
    }
    const errorPages = [
      { id: 1, name: 404', lang: 'en' },
      { id: 2, name: '500', lang: 'en' }
    ]

    errorPages.forEach(errorPage => {
      paths[`/errorPage/${errorPage.id}`] = {
        page: '/errorPage/[id]',
        query: { id: errorPage.id }
      }
    })

    return paths
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    config.plugins.push(
      new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$' // embed all javascript and css inline
      })
    )
    config.plugins.push(new HtmlWebpackInlineSourcePlugin())
    return config
  }
}

он не преобразует ресурсы во встроенный формат и продолжает связывать их. Есть ли способ достичь желаемого результата с помощью любого другого дополнения в веб-пакете или неправильная конфигурация?

заранее спасибо!

РЕДАКТИРОВАТЬ: это мой проект. json раздел зависимостей: 

"dependencies": {
    "isomorphic-unfetch": "^3.0.0",
    "next": "latest",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0"
  }
...