модули разделения и импорта webpack - PullRequest
Новая
       0

модули разделения и импорта webpack

1 голос
/ 18 января 2020

Впервые в веб-паке, особенно для разделения кода.

Я начал создавать vendor.js, используя следующее: 

    ...
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
   ...

Это было легко понять, импортировать main.js и vendor.js в моем индексе. html, работал хорошо, но мой vendor.js файл все еще был слишком большим.

Я нашел здесь учебник, и он рекомендовал разбивать каждый пакет: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 Что заставило меня разделить модули, а не просто создать большой vendor.js файл https://gist.github.com/davidgilbertson/838312f0a948423e4c4da30e29600b16

  ...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
  ...

Я сделал это, и это тоже сработало! Я могу видеть все свои пакеты в папке /dist/bundles, как и ожидалось.

Итак, что теперь? Кажется, ДЕЙСТВИТЕЛЬНО ЦИФРА , чтобы вручную вывести список 124 пакеты в моем индексе. html В идеале я хотел бы просто импортировать их все, где это необходимо - означает ли это изменение всех моих компонентов (мне это нравится, но как?)

У меня есть компонент, который импортирует следующее: 

import React, { Component } from 'react';

import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

похоже, что это соответствующие файлы: 

/dist/bundles/npm.react.myApp.bundle.js
/dist/bundles/npm.material-ui.myApp.bundle.js

Как / можно импортировать их в мои компоненты?

1 Ответ

0 голосов
/ 19 января 2020

Я добавил html-webpack-plugin https://github.com/jantimon/html-webpack-plugin Я указал шаблон со следующим телом: 

<body>
  <div id="appRoot"></div>
</body>

, что привело к следующему: 

<body>
  <div id="appRoot"></div>
  <script ......many..... />
</body>

FWIW, я также обновил свой output реквизит в webpack.config следующим: 

filename: 'main.myApp.[contenthash].bundle.js',
chunkFilename: 'bundles/[name].myApp.bundle.js'

Мне понравилось добавление contenthash к main.js, так что оно сломает кеширование, когда я sh новая сборка, и в моем хранилище S3 будет резервная копия / история.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...