I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
Related
In React project both index.html and index.js file are inside different folder and there is no link in between these two file. Then how we are able target div whose id is root of HTML file by
using document.getElementById("root") inside index.js file.
please answer this in easy language because i have just start learning this , I am compeletly begineer.
React is one of the best JS libraries out there. It simplifies the development process without cluttering the implementation details explicitly. The index.html and index.js get linked during runtime when you start the script. React uses webpack under the hood where the entry for the webpack is index.js and when it is run(after all the conversions) it injects the javascript code in the HTML file which is index.html. And you can see this injected code in the index.html when you build the bundle inside the build folder.
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I have a homepage(index.html) which is a static html with its assets, and after user login at the homepage, it will go to the second page(home.html) which is a react app.
My folder structure is like this:
--build/
----index.html
----home.html
----home.bundle.js
----assets/
------index.css
------index.js
--src/
----static/
------index.html
------home.html
------assets/
--------homepage.css
--------homepage.js
----components/
------home.js
I want to use webpack to :
1. minify the assets of index.html
2. bundle the index.js app.
My questions are:
1. What about I bundle all the assets of index.html rather than just uglify? Is this a better approach?
2. How to use Webpack to fulfill the above 2 requirements? I know how to bundle a pure SPA but don't know how to deal with this mixed type.
Thanks
You can't uglify an html file (otherwise i will learn something today ;-)) but you can uglify your javascript to reduce the size and allow a better performance when they re loaded in the browser.
So what you can do for starting, it is too bundle all your javascript in one bundle file that you will insert manually in your html file. You can do it because in general we give a static name (e.g bundle.js) for the bundle generated by webpack.
Hope that s answering your question?
Romain
I want to include a custom JavaScript in the app.js file which as the following code:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
The require only works for published packages and using node install but I want to know if there is a way to include a custom js in this file in order to have just one built script in my app (in this case the app.js script).
Add your scripts under this path \resources\assets\js\,
(ex : \resources\assets\js\scripts\my_script.js & \resources\assets\js\another_script.js)
And, add them to \resources\assets\js\app.js
require ('./scripts/my_script.js');
require ('./another_script.js');
Just add your script in resources/assets/js and then run gulp to compile all your scripts into app.js
Check this for more info
I presume you have other files that are not exactly VueJs files and you want to build into a single script. In that case it is not good to put the script in that file. You can however place the files in your resources/assets/js folder and add some code to your gulpfile.js to build all your scripts into one file. Here is the code you might need to add.
mix.scripts([
'filename.js',
]);
By default, the build file will be placed in public/js/all.js.
You can customise that driectory by modifying the example above to something like this
mix.scripts([
'filename.js
], 'path/to/file.js');
My Rails project contains TypeScript files which are being translated into JavaScript. For every translated .js file I also get a .js.map file. An example file structure is as follows:
/assets/javascripts/resources/Setting.ts
/assets/javascripts/resources/Setting.js
/assets/javascripts/resources/Setting.js.map
And in my application.js I simply do
//= require_tree .
The problem is that when this whole things gets rendered I get the following HTML (for each TypeScript file I have):
<script src="/assets/resources/Setting.js?body=1"></script>
<script src="/javascripts/resources/Setting.js.map.js"></script>
As you can see - for some reason Rails thinks that Settings.js.map file is to be included and automatically adds .js to it.
If this means anything - the TypeScript compilation happens only at IDE level, so it is not integrated into the Rails in any way.
Rails version: 4.2.1
So.. how do I exclude those map files?