We Keep Coding

Transfer a file, then inline it without Webpack bundling/loader code

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!

How to uglify the assets for static html and bundle js at one go using webpack?

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

Gulp: how to use CDN for js lib?

I'm new in AngularJS and Gulp.
In one example, some libs are copied by Gulp from the node_modules folder in a js/lib/angular2 folder:
gulp.task('libs', function() {
return gulp.src([
'node_modules/angular2/bundles/angular2.dev.js'
... // other libs
]).pipe(gulp.dest(src + 'js/lib/angular2'));
});
then added in index.html via script tag
<script src="js/lib/angular2/angular2.dev.js"></script>
What if I would load them via CDN?
During development I can use local js files, copied by Gulp, but in production have I substitute them "by hand" with their corresponding CDN file (if any)? or there is a way to do it directly with Gulp?
EDIT
I found the plugin gulp-cdnizer

There is a plugin for gulp, gulp-processhtml, that can do this. It uses conditional comments that will remove/replace/add to your HTML files based on the gulp task.
https://www.npmjs.com/package/gulp-processhtml

Gulp output to multiple files rather than one big file?

Is it possible to configure the gulpfile to output several files rather than one?
All the examples I came across demonstrate minification and concatenation of all js files into one big bundle js file the index.html would load.
When your apps get bigger and more complex using many libraries, this bundle gets bloated pretty quickly and you come to an understanding that one big bundle file is not a good fit to scale your app.
Is this concatenation a must? or can we simple minify & uglify & browserify each file to a corresponding minified version in the output folder?
Cheers
Ajar

You can definitely configure a gulpfile to output several files rather than one. For instance, I have a gulp task:
gulp.task('styles', function () {
gulp.src('dev/less/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
});
I have 5 .less files in my less folder, and they become 5 .css files with matching names in my distribution folder.
And for JavaScript files as well:
gulp.task('scripts', function () {
gulp.src('dev/landing/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
Four JavaScript files become uglified versions of themselves in my distribution/js folder.
However, this is a different question if you want to address browserify specifically. browserify builds with the intent of including any dependencies stemming from your initially included JavaScript file.
If keeping separate files is more important to you, you can look into browserify-deoptimizer

How to handle angular module dependencies in other directories?

Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?

You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.

They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.