depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Upgrade to Webpack 4 - first try

Browse source 
Signed-off-by: David Mehren <dmehren1@gmail.com>
This commit is contained in:
David Mehren 2018-07-02 22:24:56 +02:00
parent 0017ddd310
commit 29a3813ada
No known key found for this signature in database
GPG key ID: 6017AF117F9756CB
7 changed files with 3026 additions and 1413 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.babelrc
View file

@ -1,6 +1,11 @@
{ {
"presets": [ "presets": [
"es2015" ["env", {
"targets": {
"node": "6",
"uglify": true
}
}]
], ],
"plugins": [ "plugins": [
"transform-runtime" "transform-runtime"

53
package.json
View file

@ -154,35 +154,40 @@
"url": "https://github.com/hackmdio/codimd.git" "url": "https://github.com/hackmdio/codimd.git"
}, },
"devDependencies": { "devDependencies": {
"babel-cli": "^6.18.0", "babel-cli": "^6.26.0",
"babel-core": "^6.21.0", "babel-core": "^6.26.3",
"babel-loader": "^6.2.10", "babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.15.0", "babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.22.0", "babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0", "babel-preset-env": "^1.7.0",
"babel-runtime": "^6.20.0", "babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^4.0.1", "babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.26.1", "babel-runtime": "^6.26.0",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^0.28.11",
"doctoc": "^1.3.0", "doctoc": "^1.3.0",
"ejs-loader": "^0.3.0", "ejs-loader": "^0.3.1",
"exports-loader": "^0.6.3", "exports-loader": "^0.7.0",
"expose-loader": "^0.7.1", "expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^1.0.1", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^0.9.0", "file-loader": "^1.1.11",
"html-webpack-plugin": "^2.25.0", "html-webpack-loader": "^0.0.5",
"imports-loader": "^0.7.0", "html-webpack-plugin": "^4.0.0-alpha",
"json-loader": "^0.5.4", "imports-loader": "^0.8.0",
"jsonlint": "^1.6.2", "jsonlint": "^1.6.2",
"less": "^2.7.1", "less": "^2.7.1",
"less-loader": "^2.2.3", "less-loader": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.0", "mini-css-extract-plugin": "^0.4.1",
"script-loader": "^0.7.0", "optimize-css-assets-webpack-plugin": "^4.0.3",
"script-loader": "^0.7.2",
"standard": "^9.0.1", "standard": "^9.0.1",
"string-loader": "^0.0.1", "string-loader": "^0.0.1",
"style-loader": "^0.13.1", "style-loader": "^0.21.0",
"url-loader": "^0.5.7", "uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^1.14.0", "url-loader": "^1.0.1",
"webpack-parallel-uglify-plugin": "^0.2.0" "webpack": "^4.14.0",
"webpack-cli": "^3.0.8",
"webpack-parallel-uglify-plugin": "^1.1.0"
}, },
"standard": { "standard": {
"globals": [ "globals": [

2
public/views/includes/header.ejs
View file

@ -1,3 +1,3 @@
<% for (var css in htmlWebpackPlugin.files.css) { %> <% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"> <link href="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.css[css].path %>" rel="stylesheet">
<% } %> <% } %>

4
public/views/includes/scripts.ejs
View file

@ -1,4 +1,4 @@
<script src="<%= webpackConfig.output.baseUrl %>/config"></script> <script src="<%= webpackConfig.output.baseUrl %>/config"></script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <% for (var js in htmlWebpackPlugin.files.js) { %>
<script src="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script> <script src="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.js[js].path %>" defer></script>
<% } %> <% } %>

62
webpack.production.js
View file

@ -3,7 +3,8 @@ var webpack = require('webpack')
var path = require('path') var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin') var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = [Object.assign({}, baseConfig, { module.exports = [Object.assign({}, baseConfig, {
plugins: baseConfig.plugins.concat([ plugins: baseConfig.plugins.concat([
@ -11,44 +12,33 @@ module.exports = [Object.assign({}, baseConfig, {
'process.env': { 'process.env': {
'NODE_ENV': JSON.stringify('production') 'NODE_ENV': JSON.stringify('production')
} }
}), })
new ParallelUglifyPlugin({
uglifyJS: {
compress: {
warnings: false
},
output: {
max_line_len: 1000000
},
mangle: false,
sourceMap: false
}
}),
new ExtractTextPlugin('[name].[hash].css')
]), ]),
optimization: {
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true
})
],
splitChunks: {
chunks: 'async',
minChunks: Infinity
}
},
output: { output: {
path: path.join(__dirname, 'public/build'), path: path.join(__dirname, 'public/build'),
publicPath: '/build/', publicPath: '/build/',
filename: '[id].[name].[hash].js', filename: '[id].[name].[hash].js'
baseUrl: '<%- url %>' // baseUrl: '<%- url %>'
} }
}), { }), {
entry: { entry: {
htmlExport: path.join(__dirname, 'public/js/htmlExport.js') htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
}, },
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
}]
},
output: { output: {
path: path.join(__dirname, 'public/build'), path: path.join(__dirname, 'public/build'),
publicPath: '/build/', publicPath: '/build/',
@ -61,6 +51,16 @@ module.exports = [Object.assign({}, baseConfig, {
} }
}), }),
new ExtractTextPlugin('html.min.css'), new ExtractTextPlugin('html.min.css'),
new OptimizeCssAssetsPlugin() new OptimizeCssAssetsPlugin(),
] new MiniCssExtractPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}]
}
}] }]

220
webpackBaseConfig.js
View file

@ -1,8 +1,8 @@
var webpack = require('webpack') var webpack = require('webpack')
var path = require('path') var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin') var CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// Fix possible nofile-issues // Fix possible nofile-issues
var fs = require('fs') var fs = require('fs')
@ -21,14 +21,6 @@ module.exports = {
'moment': 'moment', 'moment': 'moment',
'Handlebars': 'handlebars' '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({ new HtmlWebpackPlugin({
template: 'public/views/includes/header.ejs', template: 'public/views/includes/header.ejs',
chunks: ['font', 'index-styles', 'index'], chunks: ['font', 'index-styles', 'index'],
@ -162,15 +154,17 @@ module.exports = {
from: 'plugin', from: 'plugin',
to: 'reveal.js/plugin' to: 'reveal.js/plugin'
} }
]) ]),
new MiniCssExtractPlugin()
], ],
entry: { entry: {
font: path.join(__dirname, 'public/css/google-font.css'), font: path.join(__dirname, 'public/css/google-font.css'),
'font-pack': path.join(__dirname, 'public/css/font.css'), 'font-pack': path.join(__dirname, 'public/css/font.css'),
common: [ common: [
'expose?jQuery!expose?$!jquery', 'expose-loader?jQuery!expose-loader?$!jquery',
'velocity-animate', 'velocity-animate',
'imports?$=jquery!jquery-mousewheel', 'imports-loader?$=jquery!jquery-mousewheel',
'bootstrap' 'bootstrap'
], ],
cover: [ cover: [
@ -187,27 +181,27 @@ module.exports = {
'cover-pack': [ 'cover-pack': [
'babel-polyfill', 'babel-polyfill',
'bootstrap-validator', 'bootstrap-validator',
'expose?select2!select2', 'expose-loader?select2!select2',
'expose?moment!moment', 'expose-loader?moment!moment',
'script!js-url', 'script-loader!js-url',
path.join(__dirname, 'public/js/cover.js') path.join(__dirname, 'public/js/cover.js')
], ],
index: [ index: [
'babel-polyfill', 'babel-polyfill',
'script!jquery-ui-resizable', 'script-loader!jquery-ui-resizable',
'script!js-url', 'script-loader!js-url',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'script!Idle.Js', 'script-loader!Idle.Js',
'expose?LZString!lz-string', 'expose-loader?LZString!lz-string',
'script!codemirror', 'script-loader!codemirror',
'script!inlineAttachment', 'script-loader!inlineAttachment',
'script!jqueryTextcomplete', 'script-loader!jqueryTextcomplete',
'script!codemirrorSpellChecker', 'script-loader!codemirrorSpellChecker',
'script!codemirrorInlineAttachment', 'script-loader!codemirrorInlineAttachment',
'script!ot', 'script-loader!ot',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/index.js') path.join(__dirname, 'public/js/index.js')
], ],
'index-styles': [ 'index-styles': [
@ -238,40 +232,40 @@ module.exports = {
], ],
'index-pack': [ 'index-pack': [
'babel-polyfill', 'babel-polyfill',
'expose?Spinner!spin.js', 'expose-loader?Spinner!spin.js',
'script!jquery-ui-resizable', 'script-loader!jquery-ui-resizable',
'bootstrap-validator', 'bootstrap-validator',
'expose?jsyaml!js-yaml', 'expose-loader?jsyaml!js-yaml',
'script!mermaid', 'script-loader!mermaid',
'expose?moment!moment', 'expose-loader?moment!moment',
'script!js-url', 'script-loader!js-url',
'script!handlebars', 'script-loader!handlebars',
'expose?hljs!highlight.js', 'expose-loader?hljs!highlight.js',
'expose?emojify!emojify.js', 'expose-loader?emojify!emojify.js',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'script!Idle.Js', 'script-loader!Idle.Js',
'script!gist-embed', 'script-loader!gist-embed',
'expose?LZString!lz-string', 'expose-loader?LZString!lz-string',
'script!codemirror', 'script-loader!codemirror',
'script!inlineAttachment', 'script-loader!inlineAttachment',
'script!jqueryTextcomplete', 'script-loader!jqueryTextcomplete',
'script!codemirrorSpellChecker', 'script-loader!codemirrorSpellChecker',
'script!codemirrorInlineAttachment', 'script-loader!codemirrorInlineAttachment',
'script!ot', 'script-loader!ot',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose-loader?Viz!viz.js',
'script!abcjs', 'script-loader!abcjs',
'expose?io!socket.io-client', 'expose-loader?io!socket.io-client',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/index.js') path.join(__dirname, 'public/js/index.js')
], ],
pretty: [ pretty: [
'babel-polyfill', 'babel-polyfill',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js') path.join(__dirname, 'public/js/pretty.js')
], ],
'pretty-styles': [ 'pretty-styles': [
@ -288,28 +282,28 @@ module.exports = {
], ],
'pretty-pack': [ 'pretty-pack': [
'babel-polyfill', 'babel-polyfill',
'expose?jsyaml!js-yaml', 'expose-loader?jsyaml!js-yaml',
'script!mermaid', 'script-loader!mermaid',
'expose?moment!moment', 'expose-loader?moment!moment',
'script!handlebars', 'script-loader!handlebars',
'expose?hljs!highlight.js', 'expose-loader?hljs!highlight.js',
'expose?emojify!emojify.js', 'expose-loader?emojify!emojify.js',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'script!gist-embed', 'script-loader!gist-embed',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose-loader?Viz!viz.js',
'script!abcjs', 'script-loader!abcjs',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js') path.join(__dirname, 'public/js/pretty.js')
], ],
slide: [ slide: [
'babel-polyfill', 'babel-polyfill',
'bootstrap-tooltip', 'bootstrap-tooltip',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/slide.js') path.join(__dirname, 'public/js/slide.js')
], ],
'slide-styles': [ 'slide-styles': [
@ -325,25 +319,25 @@ module.exports = {
], ],
'slide-pack': [ 'slide-pack': [
'babel-polyfill', 'babel-polyfill',
'expose?jQuery!expose?$!jquery', 'expose-loader?jQuery!expose-loader?$!jquery',
'velocity-animate', 'velocity-animate',
'imports?$=jquery!jquery-mousewheel', 'imports-loader?$=jquery!jquery-mousewheel',
'bootstrap-tooltip', 'bootstrap-tooltip',
'expose?jsyaml!js-yaml', 'expose-loader?jsyaml!js-yaml',
'script!mermaid', 'script-loader!mermaid',
'expose?moment!moment', 'expose-loader?moment!moment',
'script!handlebars', 'script-loader!handlebars',
'expose?hljs!highlight.js', 'expose-loader?hljs!highlight.js',
'expose?emojify!emojify.js', 'expose-loader?emojify!emojify.js',
'expose?filterXSS!xss', 'expose-loader?filterXSS!xss',
'script!gist-embed', 'script-loader!gist-embed',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose-loader?Viz!viz.js',
'script!abcjs', 'script-loader!abcjs',
'headjs', 'headjs',
'expose?Reveal!reveal.js', 'expose-loader?Reveal!reveal.js',
'expose?RevealMarkdown!reveal-markdown', 'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/slide.js') path.join(__dirname, 'public/js/slide.js')
] ]
}, },
@ -356,8 +350,8 @@ module.exports = {
}, },
resolve: { resolve: {
modulesDirectories: ['node_modules'], modules: ['node_modules'],
extensions: ['', '.js'], extensions: ['.js'],
alias: { alias: {
codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'), codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'),
inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'), inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@ -388,54 +382,82 @@ module.exports = {
}, },
module: { module: {
loaders: [{ rules: [{
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.js$/, test: /\.js$/,
loader: 'babel', use: [{loader: 'babel-loader'}],
exclude: [/node_modules/, /public\/vendor/] exclude: [/node_modules/, /public\/vendor/]
}, { }, {
test: /\.css$/, test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader') use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}, { }, {
test: /\.scss$/, test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'sass-loader') use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'sass-loader'
]
}, { }, {
test: /\.less$/, 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'), 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+)?$/, test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file' use: [{loader: 'file-loader'}]
}, { }, {
test: /\.html$/, test: /\.html$/,
loader: 'string' use: [{loader: 'string-loader'}]
}, { }, {
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 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+)?$/, 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+)?$/, 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+)?$/, 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+)?$/, test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/gif' use: [{
loader: 'url-loader',
options: {limit: '10000', mimetype: 'image/gif'}}]
}] }]
}, },
node: { node: {
fs: 'empty' fs: 'empty'
}, },
quiet: false,
noInfo: false,
stats: { stats: {
assets: false assets: false
} }

4091
yarn.lock
View file

File diff suppressed because it is too large Load diff