From 29a3813adaa54adaafab1678e30d754ecf0c9e3b Mon Sep 17 00:00:00 2001 From: David Mehren Date: Mon, 2 Jul 2018 22:24:56 +0200 Subject: Upgrade to Webpack 4 - first try Signed-off-by: David Mehren --- webpackBaseConfig.js | 220 ++++++++++++++++++++++++++++----------------------- 1 file changed, 121 insertions(+), 99 deletions(-) (limited to 'webpackBaseConfig.js') diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 798b64e7..7417cb1b 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -1,8 +1,8 @@ var webpack = require('webpack') var path = require('path') -var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var CopyWebpackPlugin = require('copy-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') // Fix possible nofile-issues var fs = require('fs') @@ -21,14 +21,6 @@ module.exports = { 'moment': 'moment', 'Handlebars': 'handlebars' }), - new webpack.optimize.OccurrenceOrderPlugin(true), - new webpack.optimize.CommonsChunkPlugin({ - names: ['cover', 'index', 'pretty', 'slide', 'vendor'], - children: true, - async: true, - filename: '[name].js', - minChunks: Infinity - }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font', 'index-styles', 'index'], @@ -162,15 +154,17 @@ module.exports = { from: 'plugin', to: 'reveal.js/plugin' } - ]) + ]), + new MiniCssExtractPlugin() ], + entry: { font: path.join(__dirname, 'public/css/google-font.css'), 'font-pack': path.join(__dirname, 'public/css/font.css'), common: [ - 'expose?jQuery!expose?$!jquery', + 'expose-loader?jQuery!expose-loader?$!jquery', 'velocity-animate', - 'imports?$=jquery!jquery-mousewheel', + 'imports-loader?$=jquery!jquery-mousewheel', 'bootstrap' ], cover: [ @@ -187,27 +181,27 @@ module.exports = { 'cover-pack': [ 'babel-polyfill', 'bootstrap-validator', - 'expose?select2!select2', - 'expose?moment!moment', - 'script!js-url', + 'expose-loader?select2!select2', + 'expose-loader?moment!moment', + 'script-loader!js-url', path.join(__dirname, 'public/js/cover.js') ], index: [ 'babel-polyfill', - 'script!jquery-ui-resizable', - 'script!js-url', - 'expose?filterXSS!xss', - 'script!Idle.Js', - 'expose?LZString!lz-string', - 'script!codemirror', - 'script!inlineAttachment', - 'script!jqueryTextcomplete', - 'script!codemirrorSpellChecker', - 'script!codemirrorInlineAttachment', - 'script!ot', + 'script-loader!jquery-ui-resizable', + 'script-loader!js-url', + 'expose-loader?filterXSS!xss', + 'script-loader!Idle.Js', + 'expose-loader?LZString!lz-string', + 'script-loader!codemirror', + 'script-loader!inlineAttachment', + 'script-loader!jqueryTextcomplete', + 'script-loader!codemirrorSpellChecker', + 'script-loader!codemirrorInlineAttachment', + 'script-loader!ot', 'flowchart.js', 'js-sequence-diagrams', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/index.js') ], 'index-styles': [ @@ -238,40 +232,40 @@ module.exports = { ], 'index-pack': [ 'babel-polyfill', - 'expose?Spinner!spin.js', - 'script!jquery-ui-resizable', + 'expose-loader?Spinner!spin.js', + 'script-loader!jquery-ui-resizable', 'bootstrap-validator', - 'expose?jsyaml!js-yaml', - 'script!mermaid', - 'expose?moment!moment', - 'script!js-url', - 'script!handlebars', - 'expose?hljs!highlight.js', - 'expose?emojify!emojify.js', - 'expose?filterXSS!xss', - 'script!Idle.Js', - 'script!gist-embed', - 'expose?LZString!lz-string', - 'script!codemirror', - 'script!inlineAttachment', - 'script!jqueryTextcomplete', - 'script!codemirrorSpellChecker', - 'script!codemirrorInlineAttachment', - 'script!ot', + 'expose-loader?jsyaml!js-yaml', + 'script-loader!mermaid', + 'expose-loader?moment!moment', + 'script-loader!js-url', + 'script-loader!handlebars', + 'expose-loader?hljs!highlight.js', + 'expose-loader?emojify!emojify.js', + 'expose-loader?filterXSS!xss', + 'script-loader!Idle.Js', + 'script-loader!gist-embed', + 'expose-loader?LZString!lz-string', + 'script-loader!codemirror', + 'script-loader!inlineAttachment', + 'script-loader!jqueryTextcomplete', + 'script-loader!codemirrorSpellChecker', + 'script-loader!codemirrorInlineAttachment', + 'script-loader!ot', 'flowchart.js', 'js-sequence-diagrams', - 'expose?Viz!viz.js', - 'script!abcjs', - 'expose?io!socket.io-client', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?Viz!viz.js', + 'script-loader!abcjs', + 'expose-loader?io!socket.io-client', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/index.js') ], pretty: [ 'babel-polyfill', - 'expose?filterXSS!xss', + 'expose-loader?filterXSS!xss', 'flowchart.js', 'js-sequence-diagrams', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/pretty.js') ], 'pretty-styles': [ @@ -288,28 +282,28 @@ module.exports = { ], 'pretty-pack': [ 'babel-polyfill', - 'expose?jsyaml!js-yaml', - 'script!mermaid', - 'expose?moment!moment', - 'script!handlebars', - 'expose?hljs!highlight.js', - 'expose?emojify!emojify.js', - 'expose?filterXSS!xss', - 'script!gist-embed', + 'expose-loader?jsyaml!js-yaml', + 'script-loader!mermaid', + 'expose-loader?moment!moment', + 'script-loader!handlebars', + 'expose-loader?hljs!highlight.js', + 'expose-loader?emojify!emojify.js', + 'expose-loader?filterXSS!xss', + 'script-loader!gist-embed', 'flowchart.js', 'js-sequence-diagrams', - 'expose?Viz!viz.js', - 'script!abcjs', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?Viz!viz.js', + 'script-loader!abcjs', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/pretty.js') ], slide: [ 'babel-polyfill', 'bootstrap-tooltip', - 'expose?filterXSS!xss', + 'expose-loader?filterXSS!xss', 'flowchart.js', 'js-sequence-diagrams', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/slide.js') ], 'slide-styles': [ @@ -325,25 +319,25 @@ module.exports = { ], 'slide-pack': [ 'babel-polyfill', - 'expose?jQuery!expose?$!jquery', + 'expose-loader?jQuery!expose-loader?$!jquery', 'velocity-animate', - 'imports?$=jquery!jquery-mousewheel', + 'imports-loader?$=jquery!jquery-mousewheel', 'bootstrap-tooltip', - 'expose?jsyaml!js-yaml', - 'script!mermaid', - 'expose?moment!moment', - 'script!handlebars', - 'expose?hljs!highlight.js', - 'expose?emojify!emojify.js', - 'expose?filterXSS!xss', - 'script!gist-embed', + 'expose-loader?jsyaml!js-yaml', + 'script-loader!mermaid', + 'expose-loader?moment!moment', + 'script-loader!handlebars', + 'expose-loader?hljs!highlight.js', + 'expose-loader?emojify!emojify.js', + 'expose-loader?filterXSS!xss', + 'script-loader!gist-embed', 'flowchart.js', 'js-sequence-diagrams', - 'expose?Viz!viz.js', - 'script!abcjs', + 'expose-loader?Viz!viz.js', + 'script-loader!abcjs', 'headjs', - 'expose?Reveal!reveal.js', - 'expose?RevealMarkdown!reveal-markdown', + 'expose-loader?Reveal!reveal.js', + 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/slide.js') ] }, @@ -356,8 +350,8 @@ module.exports = { }, resolve: { - modulesDirectories: ['node_modules'], - extensions: ['', '.js'], + modules: ['node_modules'], + extensions: ['.js'], alias: { codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'), inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'), @@ -388,54 +382,82 @@ module.exports = { }, module: { - loaders: [{ - test: /\.json$/, - loader: 'json-loader' - }, { + rules: [{ test: /\.js$/, - loader: 'babel', + use: [{loader: 'babel-loader'}], exclude: [/node_modules/, /public\/vendor/] }, { test: /\.css$/, - loader: ExtractTextPlugin.extract('style-loader', 'css-loader') + use: [ + MiniCssExtractPlugin.loader, + 'css-loader' + ] }, { test: /\.scss$/, - loader: ExtractTextPlugin.extract('style-loader', 'sass-loader') + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { + importLoaders: 1 + } + }, + 'sass-loader' + ] }, { test: /\.less$/, - loader: ExtractTextPlugin.extract('style-loader', 'less-loader') + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { + importLoaders: 1 + } + }, + 'less-loader' + ] }, { test: require.resolve('js-sequence-diagrams'), - loader: 'imports?_=lodash&Raphael=raphael&eve=eve' + use: [{ + loader: 'imports-loader', + options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'}}] }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - loader: 'file' + use: [{loader: 'file-loader'}] }, { test: /\.html$/, - loader: 'string' + use: [{loader: 'string-loader'}] }, { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?prefix=font/&limit=5000' + use: [{ + loader: 'url-loader', + options: {prefix: 'font/', limit: '5000'}}] }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=application/octet-stream' + use: [{ + loader: 'url-loader', + options: {limit: '5000', mimetype: 'application/octet-stream'}}] }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=image/svg+xml' + use: [{ + loader: 'url-loader', + options: {limit: '10000', mimetype: 'svg+xml'}}] }, { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=image/png' + use: [{ + loader: 'url-loader', + options: {limit: '10000', mimetype: 'image/png'}}] }, { test: /\.gif(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=image/gif' + use: [{ + loader: 'url-loader', + options: {limit: '10000', mimetype: 'image/gif'}}] }] }, node: { fs: 'empty' }, - quiet: false, - noInfo: false, stats: { assets: false } -- cgit v1.2.3 From dcb10b0ec9e545e6049e480c5b3d30a2072358ef Mon Sep 17 00:00:00 2001 From: David Mehren Date: Mon, 27 Aug 2018 13:37:42 +0200 Subject: Upgrade to Webpack 4 - fix CSS import order Signed-off-by: David Mehren --- webpackBaseConfig.js | 51 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 17 deletions(-) (limited to 'webpackBaseConfig.js') diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 7417cb1b..971a960e 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -25,13 +25,15 @@ module.exports = { template: 'public/views/includes/header.ejs', chunks: ['font', 'index-styles', 'index'], filename: path.join(__dirname, 'public/views/build/index-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font-pack', 'index-styles-pack', 'index-styles', 'index'], filename: path.join(__dirname, 'public/views/build/index-pack-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/scripts.ejs', @@ -43,19 +45,22 @@ module.exports = { template: 'public/views/includes/scripts.ejs', chunks: ['common', 'index-pack'], filename: path.join(__dirname, 'public/views/build/index-pack-scripts.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font', 'cover'], filename: path.join(__dirname, 'public/views/build/cover-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font-pack', 'cover-styles-pack', 'cover'], filename: path.join(__dirname, 'public/views/build/cover-pack-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/scripts.ejs', @@ -67,19 +72,22 @@ module.exports = { template: 'public/views/includes/scripts.ejs', chunks: ['common', 'cover-pack'], filename: path.join(__dirname, 'public/views/build/cover-pack-scripts.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font', 'pretty-styles', 'pretty'], filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font-pack', 'pretty-styles-pack', 'pretty-styles', 'pretty'], filename: path.join(__dirname, 'public/views/build/pretty-pack-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/scripts.ejs', @@ -91,19 +99,22 @@ module.exports = { template: 'public/views/includes/scripts.ejs', chunks: ['common', 'pretty-pack'], filename: path.join(__dirname, 'public/views/build/pretty-pack-scripts.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font', 'slide-styles', 'slide'], filename: path.join(__dirname, 'public/views/build/slide-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/header.ejs', chunks: ['font-pack', 'slide-styles-pack', 'slide-styles', 'slide'], filename: path.join(__dirname, 'public/views/build/slide-pack-header.ejs'), - inject: false + inject: false, + chunksSortMode: 'manual' }), new HtmlWebpackPlugin({ template: 'public/views/includes/scripts.ejs', @@ -420,7 +431,8 @@ module.exports = { test: require.resolve('js-sequence-diagrams'), use: [{ loader: 'imports-loader', - options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'}}] + options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'} + }] }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: [{loader: 'file-loader'}] @@ -431,27 +443,32 @@ module.exports = { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'url-loader', - options: {prefix: 'font/', limit: '5000'}}] + options: {prefix: 'font/', limit: '5000'} + }] }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'url-loader', - options: {limit: '5000', mimetype: 'application/octet-stream'}}] + options: {limit: '5000', mimetype: 'application/octet-stream'} + }] }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'url-loader', - options: {limit: '10000', mimetype: 'svg+xml'}}] + options: {limit: '10000', mimetype: 'svg+xml'} + }] }, { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'url-loader', - options: {limit: '10000', mimetype: 'image/png'}}] + options: {limit: '10000', mimetype: 'image/png'} + }] }, { test: /\.gif(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'url-loader', - options: {limit: '10000', mimetype: 'image/gif'}}] + options: {limit: '10000', mimetype: 'image/gif'} + }] }] }, node: { -- cgit v1.2.3 From 6056f9a392c27defafebdac2816b5dcf5f30eb91 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 2 Sep 2018 10:57:38 +0200 Subject: Upgrade to Webpack 4 - remove baseUrl property Signed-off-by: David Mehren --- webpackBaseConfig.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'webpackBaseConfig.js') diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 971a960e..19d021d9 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -356,8 +356,7 @@ module.exports = { output: { path: path.join(__dirname, 'public/build'), publicPath: '/build/', - filename: '[name].js', - baseUrl: '<%- url %>' + filename: '[name].js' }, resolve: { -- cgit v1.2.3