My build on webpack-dev-server works fine, but when I compile with NODE_ENV=production webpack --config html file outputs blank page.
In dev-server html I load files this way
<script src="http://localhost:8000/build/vendor.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8000/build/main.css" media="screen" />
<script src="http://localhost:8000/build/main.js"></script>
And in production html (resides in /build/):
<script type="text/javascript" src="vendor.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
<script type="text/javascript" src="main.js"></script>
Configs differ in following:
Production env removes
react-hot style-loader css-loader less-loader loaders,
entries 'webpack/hot/dev-server' 'webpack-dev-server/client?http://0.0.0.0:8000', HotModuleReplacementPlugin(), #eval devtool
Production env adds:
style css less loaders, optimize.OccurenceOrderPlugin(), optimize.UglifyJsPlugin({comments: /a^/, compress: {warnings: false}}, sourcemap devtool
Thanks for help!
Related
I have a CSS LESS file, and it include css less code. I am trying to import it into my html file, in the head, like so:
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
</head>
However, the css is not processing, and there is no css showing up all just non-css stuff on the html page.
am i importing it wrong?
I don't know what's in you less.js file, but in case less.js is a script to compile your less file, you have to put it before the link tag in your head.
<head>
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>
I have included Bootstrap into my Scala/Play Project in Intellij.
But it is not rendering.
I included bootstrap.min.css, bootstrap.min.js and jquery-3.4.1.min.js.
Folder structure:
in public folder: Folder css with bootstrap.min.css and main.css; Folder images with favicon.img; Folder js with bootstrap.min.js, jquery-3.4.1.min.js and main.js
HTML-Codes where I am trying to access bootstrap
in the HTML header
<link rel="stylesheet" media="screen" href=#routes.Assets.versioned("css/main.css")">
<link rel="shortcut icon" type="image/png" href=#routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Before the closing body-tag:
<script src=#routes.Assets.versioned("js/main.js")" type="text/javascript"></script>
<script src=#routes.Assets.versioned("js/jquery-3.4.1.min.js")" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=#routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
The result is a HTML page without any css (Default font: Times new Roman).
The HTML page is not rendered using bootstrap.
How I can include Bootstrap so that it is rendered correctly?
I'm referencing these files in my index.html:
<link href="wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="wwwroot/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="wwwroot/lib/angular/angular.min.js"></script>
<script src="wwwroot/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="wwwroot/app/app.js"></script>
<script src="wwwroot/app/controllers/home.controller.js"></script>
But when I build the project with IIS Express in visual studio, I get a 404 error for each one. When I look at the console and resources tabs in Chrome to see where it's trying to pull the files from, I see that the directory is an old one from a previous, similar project.
I've tried clearing my cache in several different ways and deleting the old project altogether, but nothing is working...
wwwroot is the root WWW directory. You should remove these path prefixes from your script's and css's links.
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers/home.controller.js"></script>
Is there a way to have Webpack scan Javascript files for require("file.js") and require("file.css") and insert <script type="text/javascript"> and <link rel="stylesheet"> (respectively) to any HTML file that includes the root Javascript file?
For example. Given:
Main.html
<html>
<head>
<script type="text/javascript" src="main.js"></script>
[...]
Main.js
require("./login.js");
require("./login.css");
I expect to get this output:
Main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="main.js"></script>
[...]
Bonus points: ability to require("login.scss") and end up with <link rel="stylesheet" type="text/css" href="login.css"/> (meaning, take into consideration the fact that SCSS files will get converted to CSS).
According to the author of Webpack, this feature does not exist yet.
I have filed this feature request: https://github.com/webpack/webpack/issues/754
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
This is a very simple thing that I can't seem to get to work. What is the correct way for referencing my resources folder in my script and link tags? Is there a trick to this since my URLs are mapped to Spring resources? Do I have to do anything special since my resources folder isn't in my WEB-INF folder? Do I need to move it into the WEB-INF folder? If I do move it there, how would it be referenced inside the WEB-INF folder. I have tried everything I can think of, including....
With folder in current position -
/WebContent/resources/scripts/jquery-1.6.1.min.js
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
With folder inside WEB-INF -
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
Are any of these right?
I'm getting this in my console when I use 'resources/scripts/jquery-1.6.1.min.js' -
May 23, 2011 11:30:19 AM org.springframework.web.servlet.DispatcherServlet noHandlerFound
WARNING: No mapping found for HTTP request with URI
[/ProjectName/resources/styles/global.css] in DispatcherServlet with name 'spring'
home.jsp -
<html>
<head>
<title>
title goes here
</title>
<script type="text/javascript" src="/WebContent/resources/scripts/global.js"></script>
<script type="text/javascript" src="/WebContent/resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/WebContent/resources/styles/global.css" media="screen" />
<script type="text/javascript">
$(document).ready(
function(){
alert('hello');
});
</script>
</head>
<body>
${message}
<input id="inputField"></input>
</body>
</html>
Replace for this:
<script type="text/javascript" src="resources/scripts/global.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/global.css" media="screen"