Is it possible to inject the JS entry point into the webpack dev server, much like the CSS is injected inline?
For example, my index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
But what I would like to see is, after running my webpack dev server, something like this (note that the CSS is injected automatically, although I do not see the js reference):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
<style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script>
</body>
</html>
Is this possible?
Yes, its possible. You need to use HTML Webpack Plugin
The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
This will generate a file dist/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
Related
I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.
b.js:
const x = 1;
export {x};
a.js:
import {x} from 'b'; // <<-- ERROR
console.log(x);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js"></script>
</body>
</html>
Error:
Uncaught SyntaxError: Unexpected token {
I'm using WebStorm and running the project in Chrome in Win7.
Update:
I changed index.html content to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js" type="module"></script>
</body>
</html>
Error:
Uncaught TypeError: Failed to resolve module specifier "b". Relative references must start with either "/", "./", or "../".
It seems that b.js is not loaded.
To use ES6 modules, you have to load the script using type="module" - this ensures that browsers that do not understand ES6 modules won't choke on it
Next, to import, you must specify path and full filename of the imported file
See comments in code
b.js
const x = 1;
export {x};
a.js
// specify the path and full filename below
import {x} from './b.js'; // <<-- NO ERROR NOW
console.log(x);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- add type="module" -->
<script src="a.js" type="module"></script>
</body>
</html>
I have a webpage, and it is running index.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
<body>
<canvas id='svs'></canvas>
</body>
</html>
For some reason, when I try to use c = document.getElementById('svs') in main.js, it just returns null. What am I doing wrong and how can I access document in main.js?
Edit:
I'm using socket.io and express and am sending index.html through res.sendFile.
I'm sending main.css and main.js through a folder with express.static.
Another thing you can do is to put your code in main.js inside a function, and then add onload to <body>:
<body onload="yourfunction()">
The template should be laid out in the following manner.Style and script tag should go under the wings of head tag.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id='svs'></canvas>
</body>
</html>
I have HTML file with external css file, like to inline the styles in external style sheet into one inline <style> tag at the top of the head . Thanks in advance for any help
Note: Do not want to use style attribute applied to each element, want to have one style tag at the top
Before Converting
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
After Converting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<!-- START: Replaced inline tag from external css file mystyle.css as above-->
<style>
.p {
color: red
}
</style>
<!-- END: Replaced inline tag from external css file mystyle.css as above-->
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
You can start by make your html file accessible from web browser
if you use php, you can make it accessible by run following command php -S 127.0.0.1:4000 , make sure you can access it by open localhost:4000 on your web browser, there are another way how to accessible from another languages, but it's out of the scope of this question
the second step is install inliner npm package npm install -g inliner
and execute inliner http://localhost:4000 > output.html
open output.html to see the result
execute inliner -i http://localhost:4000 > output.html if you don't want to convert the image to be base64 encoded
I am in the process of creating a shell script .sh.
I now need to create a html file and add the html of a whole html5 template and same it.
So...
sh myshfile.sh
touch index.html
...Add the html of a html5 template
For example...create a html file and add this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
...via a shell script.
How do I do this?
You could use one of the following methods.
If the content of the template is stored in a file,
cat template.html > index.html
If the content is to be stored in the script itself then,
echo "<html><h1>This is a test</h1></html>" > index.html
Don't forget to escape the quotes with \"