I am new to webpack and trying to figure out how to have the code splitting working.
I have a large bundle created from react-native-web and I want to split it into two smaller ones. One will include all node_modules and the other one my custom code.
Please note that my app has a single entry point and I do not require dynamic import at the moment.
I have tried adding the following into my webpack configuration
optimization: {
splitChunks: {
chunks: 'all'
}
}
This created two bundles, however my app is not rendered in the browser. Do I have to somehow reference the second bundle from the first one? Does anyone have a working example?
I have found the solution!
I had to add chunkFilename with the newly created chunk name as follows:
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
Related
i'm developing my first Angular2 app and i'm using this folders structure:
components
component1
home.component.ts
home.component.html
home.component.scss
I'm using Gulp to run tasks for building the app. The final folders structure will be this one:
scripts
somefile1.js
somefile2.js
...
styles
mine.css
vendor.css
index.html
favicon.ico
Can you tell me what is the best way to incorporate HTML templates within Javascript files?
Besides i would be able to easily debug code, so i would see the original folders structure in browser's inspection tools.
I'm currently using gulp-sourcemaps plugin and sourceMap option set to true for Typescript compiler to do the same for Styles and Scripts.
What node plugins could i use to reach this purpose for HTML templates?
I've used gulp-angular-embed-templates on multiple projects with great success.
Here is an example task:
gulp.task('embed-templates', () => {
gulp.src('app/**/**.js')
.pipe(embedTemplates({sourceType:'js', minimize: {quotes: true, empty: true}}))
.pipe(gulp.dest('app/'));
});
Hello I am trying to learn how to develop big cartel themes with the dugway api and I am having trouble linking to the subdomain of a companies current products. Per the documentation it says I need to put in the subdomain in the config file.
This is what I have tried so far, in the dugway.json file I have this "store": {
"subdomain": "kounterfitklothing"
},
and then restarting the dugway server. Once I do that and refresh the page I still see the dugway barebones page.
I also tried adding options[:store] = 'kounterfitklothing' to the config.ru file and nothing happens. Any help would be greatly appreciated.
I can confirm that with the latest version, inserting this into the dugway.json file will load the store properly (config.ru is no longer used for loading the store):
{
"store": {
"subdomain": "kounterfitklothing"
}
}
It could be ignoring the setting if you're missing the first set of open/close braces as well, so double check that - and make sure you're using the latest version of Dugway as well.
I figured it out, I didn't remove the comma after the curly brace.
I am using several django packages (rest_framework, ...) and several bower packages (summernote, ...). When doing collectstatic, lots of files get collected, including some which are certainly not needed by the application (examples, ...)
So, I end up syncing around 10000 files to S3 for a very small site, which doesn't make any sense. How to make this whole process a bit more sensible?
I would say the culprit is django's collectstatic, and not the aws s3 sync which just does what I tell it: upload everything from collectstatic.
I can share with you our approach: we never put bower_components and other such libraries directly in the static directory. We put them somewhere else and then have a grunt task that copies only the files we need into the static directory.
A basic setup looks something like:
grunt.initConfig({
// Copy only the stuff we need from bower_components
copy: {
all: {
files: [
// JS
{
expand: true, flatten: true,
// You can be more generic with something like "bower_components/**/*.min.js"
src: [
"bower_components/bootstrap/dist/js/*.min.js",
"bower_components/jquery/*.min.js"
],
dest: "static/js/"
},
// Same for CSS
]
}
}
});
This approach has its flaws - you now have an extra piece of config to maintain on top of your bower.json etc. It will also only help to deal with the files generated by your applications.
In addition to this you can add some --exclude patterns to aws s3 sync to filter out the most obvious fluff. Again there is a caveat here that you may end up causing more problems than you solve if you are not careful what you exclude!
By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).
What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?
Update: As far as I can see there are the following (not very elegant) options:
1) Using SASS and #import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in #import (e.g. #import('**/*.scss')), which makes this solution cumbersome for big projects.
2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.
3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.
In Brocfile.js:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:
/assets/app.css
/assets/app-<fingerprint>.css
So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.
Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).
In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.
Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.
I am trying to get external_image_list_url to work with tinymcs and Django. My understanding is that the user will be able to see a list of his or her images when clicking on the image icon (the one with the tree). From here an image can be selected and inserted.
Am I right that it is the icon with the tree? It's the one called "image". The one called "insertimage" doesn't work at all - the icon is not displayed. It and insertfile are the only ones that aren't displayed. I'm Ok with that unless I need it for this list functionality.
First I am trying just to get any image to appear in a list. I have done the following:
Created myexternallist.js and placed it where I keep my other JS files. I can access these other files via src = "/media/js/filename.js" because of my django settings. But is this also what I should put for:
tinyMCE.init({
external_image_list_url : "/media/js/myexternallist.js",
... })
In this file it says:
var tinyMCEImageList = new Array(["Logo 1", "/media/js/photo.jpg"],);
photo.jpg is in the same folder as myexternallist.js
I have also tried just "photo.jpg" and various other combinations. Not sure if my issue has to do with my relative paths or something else altogether. I'm not sure what an absolute path should be. Right now I'm working on localhost, but won't always be.
Solved it, argh. The issue was the comma near the end of the line "var tinyMCEImageList =..."
Now it works fine with the relative urls starting with /media
The clue was given by Firebug Console, which showed me the js error. I just happened to click there, but will be using that a lot from now on!