diff options
author | Christoph (Sheogorath) Kern | 2018-10-03 16:52:32 +0200 |
---|---|---|
committer | GitHub | 2018-10-03 16:52:32 +0200 |
commit | edcd8a23ff02fd6cdda3255cd5c4da8aa73ee8d7 (patch) | |
tree | 0308250df2177e5ea909be155ffdff4918b08359 /webpackBaseConfig.js | |
parent | 7749a72f289159dd822f9b83f67a1f5554ce4fc0 (diff) | |
parent | c66aa60495c0ef9a709e6904f5d8a099e3bb036a (diff) |
Merge pull request #932 from davidmehren/webpack-4
Upgrade to Webpack 4
Diffstat (limited to 'webpackBaseConfig.js')
-rw-r--r-- | webpackBaseConfig.js | 262 |
1 files changed, 150 insertions, 112 deletions
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 798b64e7..19d021d9 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,25 +21,19 @@ 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'], 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', @@ -51,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', @@ -75,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', @@ -99,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', @@ -162,15 +165,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 +192,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 +243,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 +293,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 +330,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') ] }, @@ -351,13 +356,12 @@ module.exports = { output: { path: path.join(__dirname, 'public/build'), publicPath: '/build/', - filename: '[name].js', - baseUrl: '<%- url %>' + filename: '[name].js' }, 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 +392,88 @@ 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 } |