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?
Related
Let's say I have a react application hosted at example.com. Now, I already have a very simple html/js website that I want to display at example.com/example. I can easily do this if I rewrite the website in react, but I don't want to do that because the html/js website is so simple and it would be unnecessary to be written in react.
Is there any way I can directly put and link this html/js website with the rest of my project?
When you create React app with create-react-app you have the following filesystem structure:
my-app/
README.md
node_modules/
package.json
public/
index.html
custom-page.html <-- Create custom page
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
https://facebook.github.io/create-react-app/docs/folder-structure
So, you can just create any static pages in /public directory and reference them. All the resources in /public directory will be available in the root of your website.
For example, custom-page.html will be accessible by http://localhost:3000/custom-page.html.
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
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.
I have the following application structure:
application
|- config
|----- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
In /routes/api/router.js module I need to require /config/config.js file and do the following:
require('../../config/config.js');
I found the code above ugly and want to make it more pretty. Also if I move /routes/api/router.js to another folder I have to refactor all requires. What is the best practices to require that modules and is it possible to require config.js from application folder root, something like the following:
require('/config/config.js');
Thanks.
There are a few ways to get around this problem. One is to put all your shared code (like config.js) in a directory under node_modules (using lib here in case you want to have directories other than config in there):
application
|- node_modules
|----- lib
|---------- config
|-------------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
So then you could require config.js using require( 'lib/config/config.js' ).
Alternatively, you could create a lib symlink in node_modules and link it to lib in your application directory structure:
application
|- node_modules
|----- lib -> ../../lib
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
One other alternative, which unfortunately is discouraged by the node docs, is to use NODE_PATH which lets you specify directories that node's require() algorithm should look into. Following the same pattern as above with lib, you would do:
application
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
and set NODE_PATH equal to $path_to_application/lib.
UPDATE
Found this great discussion on the topic which includes the options above as well as a few other ones.
The easiest solution is to use path.resolve. If you only give relative paths to path.resolve then it assumes they are relative to the current working directory, i.e. the project root. So all you need is:
const path = require('path');
path.resolve('config/config.js');
require('/config/config.js');
will not work as you are using the root of the system(os) not the root of the application.
var path=require('path');
var root=path.dirname(process.mainModule.filename);
or
var root=process.cwd();
will give you the root of the application. To navigate to config.js
path.resolve(root,'config/config.js)
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