use Webpack code-splitting to dynamically import Highlight.js languages as they are detected by Showdown Markdown extension
This commit is contained in:
parent
8dc2a99926
commit
41c12c853c
9 changed files with 70 additions and 33 deletions
|
@ -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;
|
||||
|
|
Reference in a new issue