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' }
]),
...
}
Related
First of all, I have a folder structure like this (and can't modify):
|- base_shared |- controls
|- .js files |-
libs |- .js files |- Project A
(created with Vue-Cli) |- Project B (created with Vue-Cli)
Inside base_shared folder we store all of our files that need to be shared with all projects, it includes libs, UI controls, etc... Those are, in majority, .js files and don't have any kind of export default or similar, since they are simple .js. Those files are frequently modified and frequently there are new files added in base_shared that all projects can consume.
Folders Project A/B are Vue-Cli created projects, with own vue.config.js, routes and .vue components.
In each project we have a public/index.html file. Here we load big part of our libraries, .css and .js files. (not using import(), but using <script src=...> in the head)
My question is: How can I load files that are out of the <%= BASE_URL %> (in this case, files from base_shared) in the
index.html of each project? All those files need to be globally accessible in all
parts/views/components of the project during runtime.
I tried many things like:
src="../base_shared/controls..."
src="<%= BASE_URL %>../base_shared/controls...
but obviously it won't work since it is out of root/host scope (let's assume for now that host is http://localhost:8081/)
I'm also using in vue.config.js the webpack with a resolve.alias to as '#base': path.resolve(__dirname, '../base_shared')
I'm used to IIS servers where I can create a "Virtual Directory" to point to base_shared and then use it in my project like the folder was inside the project root (when it is not, it's virtual)
There's something like that in Vue/Node ? Can I configure a virtual path? Or I need to rethink the idea?
Did you try to set this into your vue.config.js?
const path = require('path')
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('libs', path.resolve(__dirname, '../base_shared/'))
}
}
Them you use an import .... from .... into your script block.
<script>
import { packagename } from "packagefolder/package.js"
import 'packagefolder/css/package.css'
export default {
...
}
</script>
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
I am using Angular4 App with Webpack. When I build the application using ng-build --prod command, the assets folder is coming in the dist folder. But, the css & js files are not in the bundled or minified form.
I would like to know how to bundle & minify the js & css files in my assets folder?
I guess your js and css files in the assets folder are external dependencies.
You can add these in the .angular-cli.json file. They will will be compiled automatically in the scripts.bundle.js for Javscript respectively in the styles.bundle.js for CSS.
Go to .angular-cli.json and add for Javascript:
"scripts": [
"path/to/your/js/file"
],
and for CSS files:
"styles": [
"path/to/your/css/file"
],
You should not add external dependencies to the assets folder.
Regards
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
In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?
What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.
As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).