Webpack генерирует неверный путь.Какой-то путь к пустому, поэтому он загружается только на стороне клиента response-loadable.json - PullRequest
Новая
       21

Webpack генерирует неверный путь.Какой-то путь к пустому, поэтому он загружается только на стороне клиента response-loadable.json

0 голосов
/ 27 ноября 2018

Если я соберу все стили в один файл и разделю только javascript, то все будет работать отлично.Эта проблема возникает только тогда, когда я пытаюсь разделить css.

Я устанавливаю ленивую загрузку для маршрутов и некоторый компонент, который требует тяжелой библиотеки, такой как библиотека диаграмм.

Вот что яиспользуя 

css module
webpack ^4.26
MiniCssExtractPlugin ^0.4.4
Loadable.ReactLoadablePlugin ^5.5.0

Параметры загрузчика MiniCssExtractPlugin 

module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /react-flexbox-grid/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            query: {
              modules: true,
              minimize: true,
              localIdentName: '[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('postcss-modules-values')(),
                require('postcss-nested')(),
                require('autoprefixer')(),
              ]
            }
          },

        ]
      }
      //
    ]
  },

Когда я запускаю веб-пакет, он генерирует 

"undefined": [
    {
      "id": "",
      "name": null,
      "file": "Building~Search.css?v=05a4504a93bc",
      "publicPath": "/dist/Building~Search.css?v=05a4504a93bc"
    },
    {
      "id": "",
      "name": null,
      "file": "Building~Search.css?v=05a4504a93bc",
      "publicPath": "/dist/Building~Search.css?v=05a4504a93bc"
    },

Параметры SplitChunks Как я уже упоминал ранее, если я объединю все стили, все будет работать нормально, то в Reaction-loadable.json 

 optimization: {
    splitChunks: {
      maxAsyncRequests: 20,
      maxInitialRequests: 20,
      minChunks: 2,
      chunks: 'all',
 // cacheGroups: {
      //   styles: {
      //     name: 'styles',
      //     test: /\.css$/,
      //     chunks: 'all',
      //     enforce: true
      //   },
      // }

    },
  },

1021 * ssr рендеринг 

let modules = []
      const context = {}
      const htmlRoot = (
        <Provider store={store}>
          <StaticRouter location={urlPath} context={context}>
            <AppRoot />
          </StaticRouter>
        </Provider>
      )

      store
        .runSaga(rootSaga)
        .done.then(() => {
          const storeState = store.getState()

          const sagaLookups = storeState.lookups

            const RTS = renderToString(
              <Provider store={store}>
                <StaticRouter location={urlPath} context={context}>
                  <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                    <AppRoot />
                  </Loadable.Capture>
                </StaticRouter>
              </Provider>,
            )
            const head = Helmet.renderStatic() 

            res.status(code).send(renderDom(RTS, port, host, storeState, head, getBundles(stats, modules)))
          }
        })
        .catch(e => {
          console.log(e.message)
          res.status(500).send(e.message)
        })

      renderToString(htmlRoot)
      store.close()
нет
...