use Webpack code-splitting to dynamically import Highlight.js languages as they are detected by Showdown Markdown extension

This commit is contained in:
Alec Merdler 2017-08-01 13:28:24 -04:00
parent 8dc2a99926
commit 41c12c853c
9 changed files with 70 additions and 33 deletions

View file

@ -1,13 +1,14 @@
const webpack = require('webpack');
const path = require('path');
const highlightedLanguages = require('./static/js/constants/highlighted-languages.constant.json');
let config = {
entry: "./static/js/main.ts",
output: {
path: path.resolve(__dirname, "static/build"),
filename: 'quay-frontend.js'
publicPath: "/static/build/",
filename: '[name]-quay-frontend.bundle.js',
chunkFilename: '[name]-quay-frontend.chunk.js'
},
resolve: {
extensions: [".ts", ".js"],
@ -47,10 +48,6 @@ let config = {
angular: "angular",
$: "jquery",
}),
// Whitelist highlight-supported languages (based on https://bjacobel.com/2016/12/04/highlight-bundle-size/)
new webpack.ContextReplacementPlugin(
/highlight\.js\/lib\/languages$/,
new RegExp(`^./(${highlightedLanguages.join('|')})$`)),
],
devtool: "cheap-module-source-map",
};
@ -60,14 +57,15 @@ let config = {
* Production settings
*/
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
config.plugins.concat([
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
// Disable mangle to prevent AngularJS errors
mangle: false
})
);
config.output.filename = 'quay-frontend-[hash].js';
}),
new webpack.optimize.CommonsChunkPlugin({name: 'common'}),
]);
config.output.filename = '[name]-quay-frontend-[hash].bundle.js';
}
module.exports = config;