Compiling HTML, CSS, and JS, into a single JS file - javascript

Is there any decent procedure to compile html, css, and js files into one js file? I've been looking on methods how to load css and html files to js, and they all require requireJS. Is there any webpack plugin, or just a module for this?
I know this is not a decent question, but I've been thinking on not always fetching an external source file (html, css).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blah blah blah</title>
<script src="something.js"></script>
<script>
// 'load' will load everthing to #something
something.load(
// options
)
</script>
</head>
<body>
<div id="something"></div>
</body>
</html>


Finally, thanks to this article, all I need is html-loader. Then I can just add import html from 'some.html'.

Related

How do I link JS and CSS in a different directory to my HTML file?

My files are in entirely separate folders. I'm attempting to call CSS and JS files from a different path. Example below:
mainDirectory\internal\scripts\main.js
mainDirectory\internal\styles\main.css
mainDirectory\internal\pages\homePage.html -- (main page file)
I want to do this without libraries.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="../folderThree\test.css">
<script src="../folderTwo/test.js" type="text/javascript"></script>
</head>
<body>
<p>Test</p>
</body>
</html>
I was able to determine that I made a syntax mistake here, as I'm used to a different system. Turns out that all I needed ../ and to swap my slashes from back to forward.

Script is loaded from Live Server but not when opening index.html

I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?

You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.

How to include external css and javascript file inside twig view in slim framework

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
</body>
</html>
it is not including these two files in my twig template can anyone help how
to include external css/js file inside twig template.(this is my twig template)

This should help:
set your app's base in the .htaccess to your public folder where you'd usually put all your css, js, media
call your css file from the base using href="{{ base_url() }}/css/main.css"

How to connect JS to HTML from different folder

I'm starting on a project using netbeans. I created a Web Page Project and its default .html is called "index". In index.html directory, it has a folder called "WEB-INF". I created a new folder inside of it and call it JavaScripts. Then I created a JS file inside that JavaScripts folder.
Below is my html and JS:
html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="WEB-INF/JavaScripts/index.js"/>
</head>
<body>
</body>
</html>
JS:
document.write("testabc");
Its a very simple JS code but nothing appearing on my browser. How can I properly link JS(from different folder) to HTML? Thanks in advance.

netbeans web application error 404 include a js

I work with Netbeans 8.2 and I created a Web Application. I have a html and a js.
The html is
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<script type="text/javascript" src="js1.js"></script>
</body>
</html>
The project's structure is
I want to include the js1.js.
When I run the application in the browser's console I get a 404
GET http://localhost:8080/Prueba/js1.js [HTTP/1.1 404 Not Found 2ms]
Why do I get this 404?

file js1.js has to be inside the web directory(in netbeans) and not outside as you show in the image

Categories

Resources