I am using HtmlWebpackPlugin() to inject webpack chunks into html file. I want similar kind of functionality to inject webpack chunks into aspx files.
Is their similar plugin available ?.
or
What changes should I do in HtmlWebpackPlugin() ?
I had a similar issue while integrating spring boot with react app. There's a workaround you can here is your server will run index.aspx. You just need to include your webpack generated index.html into you aspx:
<!-- #include file="~/path/to/index.html" --> // webpack generated
Related
I’m having an issue with Snowpack and CSS modules. When I build the app it creates a .json file with the hashed and non-hashed class names but they are not loaded into index.js and all the classes show as undefined when inspecting the page. When I look at the source I can see an empty object that looks like it should have the JSON in and if I add it manually it works... is there something I need to configure to get this to work or should it just do it after importing the xxx.module.css file?
Additionally is there a way to bundle the css in with the JavaScript so it injects the styles at runtime rather than having a separate css file? Maybe using #snowpack/webpack to bundle them?
Update:
I just updated to the latest version of snowpack and it doesn’t even generate the .json file...
my index.php is like the following :
<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
I would like to add webpack to bundle all these files and minify them
I did not find the way to do that.
I have installed npm , node and webpack
I manged to us webpack to simple files like: webpack entry.js bundle.js . but not for my angular app
Let me answer it in general and then specific to your use case.
IN GENERAL:
Webpack
is a module bundler
needs entry and output as minimum
configuration
Where do i configure/list-out all my application code?
You dont configure it but code it. Please read on...
How webpack knows what code/modules to pick up to bundle?
Webpack will look at the code configured for entry and then internally builds its module dependencies (as dependency graph).
How do you declare module dependencies?
In short: by using require("module-or-path-here") or import "module-or-path-here". Do note that the javascript (ES6 a.k.a ES2015) itself has native module support now. Here is a good article on JS modules.
What is dependency graph?
Webpack will start with the code configured for entry and then pick up its immediate dependencies. It then goes to find out the dependencies of those immediate dependencies and so on...
Once the dependency graph is complete, webpack will start processing them and bundle them into output.filename located at output.path
Fine, but i want to perform some resource (JS / CSS / SCSS / images, etc..) specific work for ex. minify js code. How to do that?
Webpack is flexible (and powerful) and allows to configure resource specific work via loaders and plugins.
IN SPECIFIC:
The modules in AngularJS (i.e. 1.x) are not same as the modules that webpack works with. As you can see, while declaring the modules in angularJS, you are defining modules with angular by calling angular.module.
One option is to make sure to bundle all your angular module definition files (i.e that consists of angular.module("module-name-here", ["depenndencies"])) first followed by the angular components that needs those modules. There are several way to do that. For ex. name all your angular modules declaration files with a common pattern and then configure webpack to pick them up first.
Minification is pretty simple to achieve with webpack. You can try one of the options pointed out in the webpack documentation.
I am using webpack in my Project, here is the tools:
HTML as - jade-html-loader
CSS as - sass-loader
Project written with AngularJS - all with components & templateUrl (ngTemplate-loader in webpack)
So I got 1 JS file in the end of the process.
All this stuff pretty cool, but I think that it will be good to create static HTML files for clients...
It's going to Improve performance(caching / no need to draw DOM elements throw JS) and it's better for browser - to download few small files, not one big JS...
I am wrong? I can't find good tools that generates static assets(html, css)/cache files.
In the end of the line - I need to find an easy way to require Jade files as templates(templateUrl) into Angular Component, but files needs to be static - so I can see them in "Sources" of the browser...
It is hard to explain - so I hope you can understand me =(.
I been there and what i learned is angular cache template are faster then static. You can also copy static html files to dist map using npm cpy tool but i will highly recommend you to use angular cache template. There is this tool you can use for converting you jade to html.
You don't need to build only one single file you could build one for the vendors and one for your app this will keep your app more clean and you can also make one for the only templates which load in angular from cache on demand. I hope i could explain. webpack come with lot's awesome plugins witch can make life easier! good luck
After week I agree that cache templates works fantastic! =).
I used plugin "webpack.optimize.CommonsChunkPlugin" to generate 2 files for my app:
Vendor - all node_modules/bower_components/libs (js+css).
App - all source of app - controllers/models/business logic/views (js,css(sass),html(jade+ngTemplate for angular)).
My entry looks like:
entry: {
app: './src/app.js',
vendor: [
"angular",
"angular-route",
... and other libs...
],
},
And there I found really cool thing: html-webpack-plugin - this plugin creates index.html file and automatically attaches all your generated JS files.
Add Used "hash" string to my files.
My dist looks like this:
/dist
/index.html
/app.xxxxxxxxx.js
/vendor.xxxxxxxxxx.js
Little magic with webpack.optimize.UglifyJsPlugin to minify all files.
And now I got lightweight, small app that waiting for deploy! =)
I'm currently working on an Angularjs based project.I am using RequireJs library to load dependencies asynchronously.
Following is my project structure :
index.html
vendors
angular.js
require.js
underscore.js
css
bootstrap.css
app.cs
images
App
app.js
signup
signup.controller.js
api.user.resource.js
user.service.js
templates
Login.html
profile
profile.controller.js
api.myprofile.resource.js
myprofile.resource.js
templates
profile.html
How can I combine all files inside of App folder into a single minifieds app.js file.Please help me to create a Grunt Task
Have a look at https://github.com/jrburke/almond. It is a minimal AMD API implementation designed for use with optimized builds.
For packaging require applications with Grunt use https://github.com/gruntjs/grunt-contrib-requirejs.
I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.