My html-webpack-plugin builds a index.html with bundle src to /main[hash].html
<script type="text/javascript" src="/main.dde2e5563b4d5cd56173.js"></script>
How to make it build index.html with ./ at the beginning of the src url? Like so:
<script type="text/javascript" src="./main.dde2e5563b4d5cd56173.js"></script>
Add a publicPath setting to your output configuration. See https://github.com/jantimon/html-webpack-plugin/issues/694 for a more complete example; in your case you probably want something like this in your webpack config:
module.exports = {
// …
output: {
// …
publicPath: '.'
},
//…
}
Related
I am facing a weird problem right now. So, I am trying to test production build, and the build files generated contain a ?v=${some random number here} to prevent caching.
However, the browser-sync doesn't load these files.
The way I figured that out is because is that I have in total 3 files, 2 script files and one stylesheet. One of the script files and the stylesheet have the query string generated.
The script file that doesn't contain the query string gets loaded.
My folder structure is
/
index.html
assets/
dist/
mystyle.css?v=1237791723
myscript.js?v=123576231612
And the two gulp tasks are
gulp.task('localScripts', function() {
return gulp.src(['assets/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.min.js', 'assets/dist/js/style.js'])
.pipe(babel({ presets: ['babili'] }))
.pipe(concat(`myscript.js?v=${date}`))
.pipe(gulp.dest(dist))
})
gulp.task('joinCss', function() {
return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.min.css', 'assets/dist/css/style.min.css'])
.pipe(concat(`mystyle.css?v=${date}`))
.pipe(gulp.dest(dist))
})
And one replace html task which I use to generate the build index.html is
gulp.task('replaceHtml', function () {
gulp.src('./start.html').pipe(htmlReplace({
'js': ['assets/dist/scripts.js', `assets/dist/myscript.js?v=${date}`],
'css': `assets/dist/mystyle.css?v=${date}`
})).pipe(rename('index.html'))
.pipe(gulp.dest('./'))
});
And, the final generated index.html has the desired files in place:
<link rel="stylesheet" href="assets/dist/mystyle.css?v=1508761436559">
<script src="assets/dist/scripts.js"></script>
<script src="assets/dist/myscript.js?v=1508761436559"></script>
And my browser-sync config is
gulp.task('server', [], function() {
browserSync.init({
server: {
baseDir: "./"
},
port: 9001,
});
});
And when I start the server, only scripts.js gets loaded.
Can anyone explain why?
I am using the latest version of browser-sync
Good day. I am beginner at require.js.
I have next scripts and css's in my html (style.css and script.js located at the same folder, where html is):
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='style.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular-animate.js"></script>
<script src="script.js"></script>
I am adding require.js as a first script:
<script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.js"></script>
and adding main.js, writing there:
requirejs.config({
baseUrl:"",
paths: {
"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",
"bootstrap":"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
(etc etc)
}
});
define(["jquery"], function() {
});
define(["bootstrap"], function() {
});
etc
I got
Error: Script error for "jquery", needed by: main
http://requirejs.org/docs/errors.html#scripterror
what I have to fix?
From RequireJS Documentation:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//**never includes a ".js" extension since
//the paths config could be for a directory**.
paths: {
app: '../app'
}
});
Paths are not supposed to end with ".js". Your code should work fine by removing the ".js" from your paths.
I created a project with the generator for Chrome extensions. Below is a representation of my folder structure.
my-wonderful-chrome-extension
app
scripts
common.js
test
index.html
spec
test.js
I want to test the common.js. My understanding of Mocha is that I should have a index.html file like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="bower_components/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="bower_components/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
mocha.reporter('html');
</script>
<script src="bower_components/chai/chai.js"></script>
<script>
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
</script>
<!-- include source files here... -->
<script src="../app/scripts/common.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
<script>mocha.run()</script>
</body>
</html>
The test file (test.js) looks like this:
/* global describe, it */
describe('Find the root recipe node', function () {
it('Should not find an elem in null dom', function () {
console.log(dds_hmr.findRecipeRoot);
});
});
The common.js file looks like this:
var dds_hmr = {};
dds_hmr.findRecipeRoot = function (elem) {
if (elem && elem.hasAttribute("itemtype")
&& elem.getAttribute("itemtype") === "http://schema.org/Recipe") {
return [elem];
} else {
var result = [];
if (elem) {
for (var i = 0; i < elem.childNodes.length; i++) {
var child = dds_hmr.findRecipeRoot(elem.childNodes[i]);
result.concat(child);
}
}
return result;
}
};
This is the error I'm getting:
1) Find the root recipe node Should not find an elem in null dom:
ReferenceError: Can't find variable: dds_hmr
at http://localhost:9000/spec/test.js:4
at http://localhost:9000/bower_components/mocha/mocha.js:4263
at http://localhost:9000/bower_components/mocha/mocha.js:4635
at http://localhost:9000/bower_components/mocha/mocha.js:4694
at next (http://localhost:9000/bower_components/mocha/mocha.js:4561)
at http://localhost:9000/bower_components/mocha/mocha.js:4570
at next (http://localhost:9000/bower_components/mocha/mocha.js:4514)
at http://localhost:9000/bower_components/mocha/mocha.js:4538
at timeslice (http://localhost:9000/bower_components/mocha/mocha.js:5531)
What do I need to do to get the test to reference the code in the common.js file?
Turns out that the solution lies in the Grunt configuration (makes sense). In the connect key for the grunt server there is a test key. Under the property options there is another property base. Add 'app' to that list. This will include the app directory at test execution time. From there the trick is to change the script include in the index.html from
<!-- include source files here... -->
<script src="../app/scripts/common.js"></script>
to
<!-- include source files here... -->
<script src="scripts/common.js"></script>
Update: Added the Grunt section
// Grunt server and debug server setting
connect: {
options: {
port: 9000,
livereload: 35729,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
chrome: {
options: {
open: false,
base: [
'<%= config.app %>'
]
}
},
test: {
options: {
open: false,
base: [
'test',
'app',
'<%= config.app %>'
]
}
}
}
Here is my folder structure:
project
|---src
| |---lib/require.js
| |---object/extend.js
| |---main.js
|
|---index.html
in the main.js, I import require.js and main.js, success:
<script type="text/javascript" src="src/lib/require.js" data-main="src/main"></script>
then in the main.js , I try to import the extend.js:
requirejs.config({
baseUrl: 'src'
});
require(["object/extend.js"], function (extend){
});
but it failed, it tell 404, and I saw the request is :
http://127.0.0.1:8000/object/extend.js
it seems the baseUrl doesn't work
so what's wrong with my code? How can I let the baseUrl work?
You should not have .js in your require. It should be:
require(["object/extend"], function (extend){
});
When RequireJS sees a dot in the module name it appears to assume that this is a full URL and does not process the baseUrl, etc. Note, however, that you can still use a dot in the module name if you've defined it as a path mapping:
require.config({
paths: {
'a.b': 'libraries/something/a.b'
}
});
and then later require it:
require(['a.b'], function (ab){
});
I have a little requirejs project with the following directory structure.
├── index.html
└── js
├── bob.js
├── build.js
├── jquery.js
├── main-built.js
├── main.js
└── require.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>A Title</title>
<script data-main="js/main-built.js" src="js/require.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
js/main.js
define(function () {
return 'bob';
});
js/build.js
({
name: 'main',
baseUrl: '.',
out: 'main-built.js'
})
js/main.js
define(function (require) {
var $ = require('jquery'),
bob = require('bob');
$(function () {
$(':header').text(bob);
});
});
I run r.js like so:
./r.js -o js/build.js
It successfully builds, but the code doesn't execute in the browser. What am I doing wrong?
To actually run the darn thing, you have to require the main module at the toplevel.
Adding this script somewhere in index.html fixes the problem
<script>require(['main'])</script>