webpack 拆分和导入模块

Question

New to webpack, code-splitting specifically. webpack 的新手，特别是代码拆分。

I started out creating a vendor.js using the following:我开始使用以下内容创建vendor.js ：

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

This was easy to understand, import main.js and vendor.js in my index.html, worked well, but my vendor.js file was still far too big.这很容易理解，在我的 index.html 中导入main.js和vendor.js ，效果很好，但我的vendor.js文件仍然太大。

I found a tutorial here and it recommended splitting out each package:我在这里找到了一个教程，它建议拆分每个包：
https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

Which had me split out the modules instead of just creating a big vendor.js file https://gist.github.com/davidgilbertson/838312f0a948423e4c4da30e29600b16这让我拆分了模块，而不仅仅是创建一个大的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('@', '')}`;
          },
        },
      },
    },
  },
  ...

I did that and it worked well too!我这样做了，而且效果很好！ I can see all of my bundles in my /dist/bundles folder as expected.我可以按预期在/dist/bundles文件夹中看到我的所有包。

So, what now?所以现在怎么办？ It seems REALLY DUMB to manually list out the 124 packages in my index.html I'd ideally like to just import them all where needed -- does that mean changing all of my components (I'm cool with doing that, but how?)在我的 index.html 中手动列出124包似乎真的很愚蠢我理想情况下只想在需要的地方导入它们——这是否意味着更改我的所有组件（我这样做很酷，但是如何？ )

I have a component that imports the following:我有一个导入以下内容的组件：

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';

it looks like these are the relevant files:看起来这些是相关文件：

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

How can/should I import these in my components?我可以/应该如何在我的组件中导入这些？

Answer 1

I added the html-webpack-plugin https://github.com/jantimon/html-webpack-plugin I specified a template with the following body:我添加了html-webpack-plugin https://github.com/jantimon/html-webpack-plugin我指定了一个具有以下正文的模板：

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

Which Resulted in the following:结果如下：

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

FWIW, I also updated my output prop in webpack.config with the following: FWIW，我还使用以下内容更新了webpack.config output道具：

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

I liked adding the contenthash to the main.js so it'll break caching when I push a new build and I'd have a backup/history in my S3 bucket.我喜欢将contenthash添加到main.js以便在我推送新构建时它会破坏缓存，并且我的 S3 存储桶中有备份/历史记录。

webpack 拆分和导入模块

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-01-18 21:16:09

webpack 拆分和导入模块

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-01-18 21:16:09

解决方案1
1 已采纳 2020-01-18 21:16:09