How to apply webpack for the angularjs? - javascript

I am new to angularjs and webpack. I had been working in angularjs with following folder structure:
app
js
app.js
controller.js
service.js
directive.js
routes.js
abc.js
xyz.js
templates
home.html
faq.html
abc.html
xyz.html
bcd.html
assets
css
bootstrap.css
style.css
abc.css
js
bootstrap.js
tether.js
popper.js
wow.js
jquery.js
abc.js
img
a.jpg
b.jpg
font
as.ttf
index.html
package.json
serve.js
I have searched through multiple tutorials but could not find an example that fits my requirement. Can somebody help me bundle using webpack for bundling js in app, js in assets and css in assets.

with node.js you need just to inizialize the project and install webpack
npm init
npm install --save-dev webpack
Then you need just configure the webpack.config.js file.
I suggest you to read the official documentation

Related

loading all css files from 'assets' directory in NUXT

I'd like to load a couple of css files from the assets folder in my nuxt project.
currently I'm loading files individually via nuxt.config.js
export default {
head: {
css: [
'~/assets/css/fonts.css'
],
}
}
which works perfectly fine for a single file. is there any way to import all files at once that are in the /assets/css folder?
I suggest you an alternative way that you can import your css or scss files by sass.
Create a folder in your assets called scss : /assets/scss/.
Install import-glob-loader by running this command:
npm install import-glob-loader --save-dev
Create a file in assets/scss/ path call it main.scss.
Open main.scss and add this code on it:
#import "imports/**/*";
Create a folder in assets/scss/ call it imports/ that involves all your css codes.
create your css files in this assets/scss/imports path.
Go to nuxt.config.js and add this code in that file:
css: ['#/assets/scss/main.scss'],

How does project with nested node_modules behave?

We are trying to separate our project into "sub modules" within single repo, but keep things like webpack, express server global, so assume structure like this
package.json
server.js
index.js
node_modules/
public/
index.html
dashboard.js
onboarding.js
dashboard/
index.js
package.json
node_modules/
components/
assets/
onboarding/
index.js
package.json
node_modules/
...
idea here is to keep build / routing / server logic at root lvl and separate modules like dashboard and onboarding into their separate folders and allow them to use their own node modules.
Will this work? Will node modules be included correctly?
webpack will build assets to public/ folder, with some vendor assets and several entry points i.e. all index.js files
What you are proposing will work fine and compile as you expect. NodeJS will initially look for modules included in your modules 'node_modules' sub-directory and then work up the ladder.

Moving to Webpack2 from Gulp.js

I'm trying to move from gulp.js to webpack2 and by the way trying to study React. So I've created small "hello world" app with Leaflet.js and React.
But just right after start I have some questions about webpack.
I want to get following structure:
app/
dist/ <-- folder with built app
images/
vendor/
vendor-image1.png
vendor-image2.png
...
app/
my-image1.png
my-image2.png
...
js/
vendor.js
app.js
css/
vendor.css
app.css
index.html
src/ <-- folder with my app source
components/
App/
index.js
MyMap/
index.js
styles.css
index.js
To achieve this structure with gulp I need only to create separate tasks for vendor and app resources (like vendor-css, vendor-js, app-css, etc.), manually list all files to process and put proper paths to dest, but how can I achieve this structure with webpack?
Second question about some resources that are added in runtime. For example Leaflet adds marker-shadow.png in runtime and currently I've got 404 for it, so how can I deal with such assets?

Using one RequireJS project within another RequireJS project

I have a RequireJS project I am working on with the following structure:
Project/
index.html
src/
main.js
projectcomponent.js
lib/
require.js
main.js is the entry point of the Require application and has the following require.config inside it:
require.config
baseUrl: "./"
main.js returns an object.
I want to use this entire project as a module inside another RequireJS project. I attempted to use r.js (the RequireJS optimisation tool) to reduce the project to a single file, which worked - but as it relied on RequireJS, its config conflicted with the config of the parent project I wanted to use this project as a module for.
How can I use one RequireJS project as a module inside another RequireJS project?
You can get round this by using almond (https://github.com/jrburke/almond) to replace the require.js dependency, making the first project a fully encapsulated single file.
There's some further explanation and relevant links on the RequireJS site: http://requirejs.org/docs/faq-optimization.html#wrap

single RequireJS optimizer file for multiple directory project

I'm wondering if it's possible to configure the RequireJS optimizer to fit with our current project structure.
The site directory is structured as below...
root
project1
scripts
main.js
main.min.js
project2
scripts
main.js
main.min.js
project3
scripts
main.js
main.min.js
I was wondering if it's possible to have a "main" file sitting at the root level that will optimize all the child project main.js files and place them within their respective directories. I noticed the multi-page optimizer example on the Requirejs homepage but i'm unsure how to configure that to work for my use case.
Is it just one main.js file per project? I think when I used require js modules, it optimized with this behavior, but in a separate build/distribution directory
see
http://www.bennadel.com/blog/2404-Compiling-Optimizing-A-Subset-Of-A-RequireJS-Application.htm

Categories

Resources