Configuring Webpack to build a SPA

webpack

#1

I have been playing with Vue for over a year, I remember that Webpack at one time or another, used to build a single build.js file that would be requested by the index.html file. Now there are all these different css, vendor, app.js, and manifest files. I am not playing anymore, I am writing an application that will be server by a ESP32. My problem is that the library I need to use for the embedded ESP32 does not buffer file requests, so I can only send the index.html and app.css, the other three are lost.
Can Webpack be configured to build one large file again? The other problem is that while I have tried to figure Webpack out I am lost on how to configure it. So any help on what sections I need to change of verbose comments would be appreciated.


#2

If you want everything (js and css) inline into a single file then you can try webpack inline plugin.
I have mention details in this post.


#3

@Jayesh
Thank you for the reply and the the link. I will study it and give it a try.


#4

@Jayesh,
I tried your suggestions.
I was wanting to use this on an existing project that is several months old. I found that the webpack that was built using VUE CLI already had HtmlWebpackPlugin installed and had several setting already in it. So when I added, “inlineSource: ‘.(js|css)$’ // embed all javascript and css inline” it made no difference. I plan to try again in the future with a “clean” VUE 3 project. In the meantime I reduced my code size and number of files by setting productionSourceMap:false, in config/index.js. Then I also removed [hash] from the output param in all the assetPath functions, like in the following:
filename: utils.assetsPath(‘js/[name].[hash].js’),
This cleaned up my outputs enough for my ESP32 to server them. Although as my project gets larger I might need to find more ways to reduce file size.