The problem: I use Webpack and I need to display part of my page in an IFRAME. The markup for the IFRAME's content is static and it includes a few JS libraries and some custom JS logic.
The idea: I wanted to bundle up all JS dependencies of the page rendered in the IFRAME alongside my other Webpack bundles and build the page itself as a static HTML asset that I can then reference from the host page as the IFRAME's src.
Method 1: I tried to use Webpack's file!val!html?attrs=script:src transform for my static HTML file.
Files
page/
lib/
- jquery.js
- ...
- page.html
- page.js
page.html
...
<script src="./page.js"></script>
...
page.js
const $ = require('./lib/jquery.js');
window.foo = () => { ... };
Webpack config
{
...,
entry: {
main: [...],
page: ['page/page.js']
}
}
This almost worked, since the JS bundle and HTML asset were indeed generated and I could require the latter on the IFRAME host page, but the linked bundle ./page.js failed to properly resolve as a URL (renders as [Object]). Tried file!val!html?interpolate with <script src="${require('file!./page.js')}">, which fails to locate the file altogether.
Method 2: Tried to use HtmlWebpackPlugin with the following config:
new HtmlWebpackPlugin({
filename: 'page.html',
template: 'page/page.html',
chunks: ['page'],
inject: 'head'
})
This too, almost worked, both the JS bundle and the page.html having been created. Contrary to the first method, JS bundle was properly linked here by the plugin. On the other hand, there seems to be no way to reference the generated HTML on my host page via require or any other reliable means.
Any suggestions would be much appreciated
Related
It is easy to build a multi-page app of Vue can be building by editing the vue.config.js file. But yesterday afternoon, when I was trying to build a multi-page web app with some ui structures in Vuetify.js instead of pure vue.js, one weird thing happened:
It is a two page application: the home page and signup page. When I run npm run build, the result dist folder does not contain the .html file of the second page.
SO I run some tests: here are what is happening:
If the home page has a filename of index.html in vue.config.js and the second page has a filename of second.html, then everything is fine.
If the home page has a filename of index.html in vue.config.js while the second page has a filename of /second/second.html or second/index.html. Then, the folder named second will not be created, neither does the file /second/second.html which is in it.
Does anyone have issues similar to this before, really appreciate for the helps.
Also, I notice that when it was just pure vue.js, the assets such as images will be put into a separate folder in dist. But after vuetify.js is added to the project, the only folders can appear in dist is the js and css and fonts, those image assets will be store under the folder dist. I am not sure if it is a feature of the newest vue.js version, or it is also caused by configuration of vuetify.js. Thanks for the help.
I find that all the stylesheets and javascript code for the second page is generated in folder css and js, the only one missing is the html template.
During building the app, there are no errors about cannot create the folder. All it have be printing is the warning for the asset size since I didn't import assets by part, the prints are:
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
home (1.54 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/home.429de16e.css
js/home.635f35e5.js
signup (1.53 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/signup.d6876e84.css
js/signup.77b83ca7.js
The home is the index file, and the second page is referening to the signup page.
module.exports = {
pages: {
home: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'home'
},
signup: {
entry: 'src/pages/signup/main.js',
template: 'public/signup.html',
filename: '/signup/index.html',
title: 'signup page'
}
},
transpileDependencies: [
'vuetify'
]
}
As you can see, I put all the html templates in the public folder. And I wish all the built html files will be named as index.html under some certain folder so I won't see html from the url of my small project.
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I was starting an angular 2 project with webpack.I am using angular2-webpack-starter https://github.com/AngularClass/angular2-webpack-starter.
I want to include external javascripts and css in my app.I have checked some blogs but I found them confusing.
I'm guessing by external css and js you mean downloaded files that you have in your project somewhere. If you've used the webpack starter seed as is you most likely have an assets folder inside src/ thats already set up for you to place external css and js files in and list them in the index.html file.
If not, either redownload the seed if you want to start again, or you can create this folder under src, and include the files in the index.html file, something like
<script src="/assets/css/lib.min.css" />
<script src="/assets/js/lib.min.js" />
If you are bundling using webpack then you will also need to tell webpack to move the assets folder to the create location. In webpack.config.js you can do the following:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin([
{ from: 'src/assets', to 'assets' }
]),
...
}
I'm looking into migrating a large, homegrown build script for one of our projects to webpack.
One feature it has is it traverses a /views directory and copies the contents of the html files into a main index.html file. This allows us to easily use KnockoutJS's templating feature without putting everything in one file ourselves. Something like this:
for relative_path, full_path in walk(os.path.join(base, "views")):
with open(full_path) as f:
index.append("""<script type="text/html" id="{0}">""".format(relative_path))
index.extend(f)
index.append("</script>")
Ideally, I'd like to be able to do something like require('./views') and have it embed each .html file as <script type="text/html" id="views/foo">...</script>, injecting the text into the script tag and setting the id to the filepath. We have almost 100 different templates, so I'd like to avoid require()ing them individually.
Can I configure html-loader or html-webpack-plugin to do this? I'm wondering if I'll have to write my own webpack plugin or if there's a way I can configure an existing plugin to do what I want.
Thanks!
I think you can accomplish this using require.context and the html loader.
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){
// code to add each template to document.body
}
I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html
It depends.
If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.
If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
});
app.import('bower_components/ladda/dist/ladda-themeless.min.css');
app.import('bower_components/ladda/dist/spin.min.js');
app.import('bower_components/ladda/dist/ladda.min.js');
return app.toTree();
};
This will then be merged into your vendor.css and vendor.js which are linked to from index.html.
Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.
brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.