如何使用webpack将应用程序和依赖项拆分到不同的js文件中

How could I use webpack split app and dependency in to different js files

本文关键字：js 文件 拆分 webpack 何使用 应用程序 依赖      更新时间：2023-09-26

嗨，我的webpack有问题。

我如何分割依赖关系和应用程序，我的目录像这个

.
├── app                  //app loginc
├── node_modules         // npm packages, contains react and react-dom
├── package.json
└── webpack.config.js

我想使用webpack将每个node_module打包到一个js文件中，并将应用程序打包到另一个文件中。

像这个

.
├── 83948393.app.js
├── 78219321.react.js
├── 27843784.react-dom.js
└── index.html

所以app.js应该更小。如果我更改app.js，客户端不必下载78219321react.js和27843784.react-dom.js

<html lang="en">
<body>
  <script src="/27843784.react-dom.js"></script>
  <script src="/78219321.react.js"></script>
  <script src="/83948393.app.js"></script>
  <div id="root"></div>
</body>
</html>

我需要一些帮助，比你

您可以通过脚本标记放入大多数node_module。https://npmcdn.com/对这里有很大帮助。

此外，使用webpack，您可以为捆绑包定义多个输入和输出文件：https://webpack.github.io/docs/multiple-entry-points.html

您甚至可以拆分您的应用程序捆绑包并异步加载其中的部分：https://webpack.github.io/docs/code-splitting.html

此外，如果文件大小是个问题，你可以优化你的捆绑包，例如，修改代码使其更紧凑：https://webpack.github.io/docs/optimization.html

希望这能有所帮助。Webpack配置很麻烦。

相关文章：