I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)
I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle
So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/
Related
I just began using Vue and I'm hitting a wall while trying to compile SCSS into separate files. I understand that any SCSS that I'm writing within components will be compiled into a single file (/dist/css/app[hash].css), but I would like separate files which aren't imported into any component for external use.
I have several SCSS files (frames.scss, lists.scss, and tables.scss ) that I would like to be compiled, minified, and prefixed into their own CSS files alongside the aforementioned CSS file.
I would like the build structure to look something like this (with the external CSS file existing alongside the app CSS file):
dist/
css/
app[hash].css
frames.css
lists.css
tables.css
I have very little experience with Webpack, so my vue.config.js file is currently empty and my postcss.config.js file is below:
module.exports = {
plugins: {
autoprefixer: {}
}
}
I've searched all over StackOverflow for a solution to no avail, so any help would be greatly appreciated!
For webpack 4, I think you want to look at mini-css-extract-plugin.
its a webpack plugin that, by, default, creates different files per input. You can use this with scss as you would expect. https://stackoverflow.com/a/53180597/6646536 might be a good example.
There is a similar tool i've used for webpack 3 here:
https://github.com/webpack-contrib/extract-text-webpack-plugin
I'm trying to repeat this tutorial:
https://ampersandjs.com/learn/npm-browserify-and-modules/#npm-browserify-amp-modules
But after installing browserify I don't see folder: node_modules/.bin
Instead I see a folder node_modules/browserify. Inside there is a bin folder, and Iinside of it - cmd.js and args.js.
How should I change this line of code in my case: ./node_modules/.bin/browserify app.js -o app.bundle.js to compile all js files into one file?
Or maybe I need to install browserify some other way?
Put together, the flow of creating a very simple web application with these tools might look something like this:
You simply need to point your cmd prompt to the browserify node_module, so drop the .bin if it's not there => /node_modules/browserify yourjsfile.js myjsfile.bundle.js
As far as I can understand this guide: the app.js file or yourjsfile.js needs to have all the library requirements included in order for it to work.
var squareNumbers = require('./square-numbers');
This means you need to write this file as an entry point for all your scripts you need to bundle.
TIP: try to find a youtube video or something to get a better understanding of this guide.
The dot in front of these directories tells you it's a system folder, in this case, not of your operating system, but from another "system/application", like node. It puts these kind of folders alphabetically on top to make a distinction.
I have been using AngularJS for around 6 months now and have recently started using Yeoman and Grunt to help with my workflow.
Is there a way to have grunt update my index.html file for files/scripts that I add manually into my app folder?
I know that if I use the command:
$ yo angular:service New-Service
then a boilerplate file will be created and my index.html file will be updated to reference the new file.
Is there a way to have this functionality for files that I do not add with the syntax shown above?
Thanks for the help.
You are searching a linker. There are several grunt plugins to do this job :
- grunt-asset-linker
- grunt-sails-linker
Here is what you have to do :
Add a grunt task with (grunt-contrib-watch) to watch folders where files are added
Add a task with (E.g : grunt-asset-linker) to link all files from one or many folder to your index.html
I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks
The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.
we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.
The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.