## Webpack bundling and chunking
The default in Webpack config is to put all the Javascript into a large bundle JS file. However this does not work well for many reasons. In my single page app, I use a lot of Javascript libraries which when put together form a very large source bundle file. 95% of the time, I will not be touching or changing any of these libraries. So here is my wishlist that comes from my C/C++ days.
## Wishlist
- It must work with [hjs-webpack](https://github.com/henrikjoreteg/hjs-webpack) which in the author's words __" is just a simplified, opinionated way to configure webpack for development and then build for production. That also supports easily generating more files.."
- Bundle together my Javascript into a separate bundle, and keep all the node_modules in a separate vendor bundle.
- When library files are not changed the generated vendor bundle should keep the same filename (to optimize CDN caching). So ensure Webpack generates the same filename when library files are not changed.
- Generate source-maps to enable easier debugging of my React apps.
## Analyzing your webpack
Run `webpack --profile --json > stats.json` to generate the stats.json file. Fire up the [Webpack Analyzer](http://webpack.github.io/analyse/#home) and upload the stats.json. The analyzer provides a nice overview (and details) of the bundles, chunks and modules in your webpack. Read more at [their documentation site](https://github.com/webpack/docs/wiki/build-performance).
## Dynamic Vendor bundling
[Jeremy Gayyed posted a blog about Dynamic vendor bundling](https://jeremygayed.com/dynamic-vendor-bundling-in-webpack-528993e48aab). It discussed the steps to configure Dynamic vendor bundling for webpack. I recommend reading this blog for a good understanding of the concepts of bundles, chunks and using CommonChunkPlugin.
I've taken some of his ideas and adapted them for hjs-webpack .
### Install node modules
```sh
npm install --save-dev webpack-md5-hash
npm install --save-dev assets-webpack-plugin
```
### Update your webpack.config.js with the following.
#### Some explanation required.
## Selecting modules that are in vendor bundle
```javascript
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => /node_modules/.test(resource),
}),
```
The .test will check if the resource is in the node_modules directory. Jeremy found [this comment](https://github.com/webpack/webpack/issues/2372#issuecomment-213149173) by Tobias Kopper (author of webpack). This is a better way than creating a list of modules that you must constantly maintain. Since you can write any logic, it is really powerful!
## Generate a consistent bundle filename in Webpack
Webpack will generate a new random filename each time you build the code. The main things that changes is the module import logic, so we split this off into a separate manifest file. The **webpack-md5-hash** will generate a deterministic hash which ensures the same hash if no content was changed. The following lines ensure the hash is used in the filename.
```javascript
config.output.filename='[name]-[chunkhash].js';
config.output.chunkFilename='[name]-[chunkhash].js';
```
## Source maps
To debug a packed file, you'll need a source map. The **devtool (optional, string, default='cheap-module-eval-source-map')** is a webpack developer tool to enhance debugging. [See the webpack docs for more options](https://webpack.github.io/docs/configuration.html#devtool).
I've chosen `source-map` which is the largest option. Ensure that you have the following lines in your config for source maps.
```javascript
devtool: 'source-map',
```
and
```javascript
config.output.devtoolLineToLine=true;
```
StackEdit provides a browser based editor for Markdown. It can then publish to your Blogger account as an HTML page. You can save the original on your disk or in the cloud. Here is the documentation page for StackEdit from their sample document at StackEdit.io.
Hey! I’m your first Markdown document in StackEdit1. Don’t delete me, I’m very helpful! I can be recovered anyway in the Utils tab of the Settings dialog.
Documents
StackEdit stores your documents in your browser, which means all your documents are automatically saved locally and are accessible offline!
Note:
StackEdit is accessible offline after the application has been loaded for the first time.
Your local documents are not shared between different browsers or computers.
Clearing your browser’s data may delete all your local documents! Make sure your documents are synchronized with Google Drive or Dropbox (check out the Synchronization section).
Create a document
The document panel is accessible using the button in the navigation bar. You can create a new document by clicking New document in the document panel.
Switch to another document
All your local documents are listed in the document panel. You can switch from one to another by clicking a document in the list or you can toggle documents using Ctrl+[ and Ctrl+].
Rename a document
You can rename the current document by clicking the document title in the navigation bar.
Delete a document
You can delete the current document by clicking Delete document in the document panel.
Export a document
You can save the current document to a file by clicking Export to disk from the menu panel.
Tip: Check out the Publish a document section for a description of the different output formats.
Synchronization
StackEdit can be combined with Google Drive and Dropbox to have your documents saved in the Cloud. The synchronization mechanism takes care of uploading your modifications or downloading the latest version of your documents.
Note:
Full access to Google Drive or Dropbox is required to be able to import any document in StackEdit. Permission restrictions can be configured in the settings.
Imported documents are downloaded in your browser and are not transmitted to a server.
If you experience problems saving your documents on Google Drive, check and optionally disable browser extensions, such as Disconnect.
Open a document
You can open a document from Google Drive or the Dropbox by opening the Synchronize sub-menu and by clicking Open from…. Once opened, any modification in your document will be automatically synchronized with the file in your Google Drive / Dropbox account.
Save a document
You can save any document by opening the Synchronize sub-menu and by clicking Save on…. Even if your document is already synchronized with Google Drive or Dropbox, you can export it to a another location. StackEdit can synchronize one document with multiple locations and accounts.
Synchronize a document
Once your document is linked to a Google Drive or a Dropbox file, StackEdit will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be detected.
If you just have modified your document and you want to force the synchronization, click the button in the navigation bar.
Note: The button is disabled when you have no document to synchronize.
Manage document synchronization
Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking Manage synchronization in the Synchronize sub-menu. This will let you remove synchronization locations that are associated to your document.
Note: If you delete the file from Google Drive or from Dropbox, the document will no longer be synchronized with that location.
Publication
Once you are happy with your document, you can publish it on different websites directly from StackEdit. As for now, StackEdit can publish on Blogger, Dropbox, Gist, GitHub, Google Drive, Tumblr, WordPress and on any SSH server.
Publish a document
You can publish your document by opening the Publish sub-menu and by choosing a website. In the dialog box, you can choose the publication format:
Markdown, to publish the Markdown text on a website that can interpret it (GitHub for instance),
HTML, to publish the document converted into HTML (on a blog for example),
Template, to have a full control of the output.
Note: The default template is a simple webpage wrapping your document in HTML format. You can customize it in the Advanced tab of the Settings dialog.
Update a publication
After publishing, StackEdit will keep your document linked to that publication which makes it easy for you to update it. Once you have modified your document and you want to update your publication, click on the button in the navigation bar.
Note: The button is disabled when your document has not been published yet.
Manage document publication
Since one document can be published on multiple locations, you can list and manage publish locations by clicking Manage publication in the menu panel. This will let you remove publication locations that are associated to your document.
Note: If the file has been removed from the website or the blog, the document will no longer be published on that location.
Markdown Extra
StackEdit supports Markdown Extra, which extends Markdown syntax with some nice features.
Tip: You can disable any Markdown Extra feature in the Extensions tab of the Settings dialog.
Note: You can find more information about Markdown syntax here and Markdown Extra extension here.
Tables
Markdown Extra has a special syntax for tables:
Item
Value
Computer
$1600
Phone
$12
Pipe
$1
You can specify column alignment with one or two colons:
Item
Value
Qty
Computer
$1600
5
Phone
$12
12
Pipe
$1
234
Definition Lists
Markdown Extra has a special syntax for definition lists too:
Term 1
Term 2
Definition A
Definition B
Term 3
Definition C
Definition D
part of definition D
Fenced code blocks
GitHub’s fenced code blocks are also supported with Highlight.js syntax highlighting:
// Foovar bar = 0;
Tip: To use Prettify instead of Highlight.js, just configure the Markdown Extra extension in the Settings dialog.
StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. ↩
[Markdown](http://daringfireball.net/projects/markdown/) has become very popular due to its simplicity and its wide adoption in Github and other developer websites. So when I was looking at Blogger to start a blog, I wanted the same easy syntax. I had expected that Blogger would support Markdown natively. Alas it does not.
I found [Francis's blog](http://blog.chukhang.com/2011/09/markdown-in-blogger.html) that explained on how to do this on the client side (no server needed!). Unfortunately it was written a few years ago and there was no updated docs on the steps to do it. So I rolled up my sleeves and took the same approach but using the latest versions of CDN hosted [jQuery](http://www.jquery.com), [highlightJS](https://highlightjs.org) and [showDown](https://github.com/showdownjs) libraries. jQuery had the nice bonus of cleaning up the previous code by abstracting away the DOM manipulation.
The code is on Github at https://github.com/cs905s/md-in-blogger.
After using this for a while:
Pros:
- You can mix HTML and Markdown easily. I couldn't figure this out with StackEdit. Create multiple pre tags for each section of markdown. Between these sections, you can add standard HTML code. This is great way to embed a GIST - which requires you to add a script HTML tag.
Cons:
- Your post shows up as Markdown in RSS feeds.
- I haven't got it to work with the mobile template (Awesome).
- Not WYSIWYG editor like [StackEdit](https://stackedit.io/editor).
## Adding markdown to your Blogger
1. Open your template, by clicking the "Template" menu item. This displays the current template. Click Edit to modify the template. At the top of your template, add the following tags just before the </head> tag.
```html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>
```
2. At the bottom of the template, add the following tags just before the </html> tag.
```html
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
<script src='//mxp22.surge.sh/markdown-highlight-in-blogger.js' type='text/javascript'></script>
```
3. Save your template. The first three steps need to be done only once. If you have a mobile template, remember to adjust that template as well.
4. Edit your post and switch from compose to HTML mode (buttons above the editor). Try out this sample in a new post.
5. Any HTML **pre** tags with the class **markdown** are converted by showdown. After this any HTML code tags in the generated HTML are highlighted by highlightJS.
6. Remember to escape your & with &amp; , < with &lt; and > with &gt;.
6. Save your post. Preview or Publish the post.
7. Now go and start [mastering Markdown at Github](https://guides.github.com/features/mastering-markdown/)
8. If you don't have a Markdown editor, use [StackEdit](https://stackedit.io/editor) for a browser Markdown editor.
## How it works.
1. Finds `pre` elements marked with `class='markdown'` with jQuery.
2. Showdown converts the markdown text content into html and injects
that back into the post before the pre (and hides the pre).
3. Each code section in the converted HTML is color highlighted by HighlightJS.
I have set the showdown convertor to to GitHub flavor markdown.
The libraries are hosted by the kind folks at [cdnjs](http://cdnjs.com). The core javascript is hosted on the [surge.sh](http://surge.sh) CDN.
