CODEWITHSUNDEEP
javascriptreactjsnpmwebpack
徐向阳
徐向阳

Reputation: 41

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

Hi， I have a problem with webpack.

How could I split dependencies and app, my dir like this

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

I want to use webpack to pack each node_module into one js file and app into another.

like this

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

so the app.js should be smaller. If I change the app.js, client does not have to download the 78219321.react.js and 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>

I need some help, than you

Upvotes: 2

Views: 141

Answers (1)

Scarysize
Scarysize

Reputation: 4291

You can drop in most node_modules via a script tag. https://npmcdn.com/ is a big help here.

Also, with webpack you can define multiple entry and output files for your bundle(s): https://webpack.github.io/docs/multiple-entry-points.html

You can even split your app bundle and load parts of it asynchronous: https://webpack.github.io/docs/code-splitting.html

Also, if file size is an issue, you can optimize your bundle eg. uglify the code to make it more compact: https://webpack.github.io/docs/optimization.html

Hope this helps. Webpack config is a pain in the a**.

Upvotes: 1

Related Questions