Merge pull request #932 from davidmehren/webpack-4

Upgrade to Webpack 4

Author: SISheogorath

.babelrc

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

package.json

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

public/views/includes/header.ejs

@@ -1,3 +1,3 @@
 <% 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">
 <% } %>

public/views/includes/scripts.ejs

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

webpack.config.js

@@ -1,10 +1,14 @@
 var baseConfig = require('./webpackBaseConfig')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var path = require('path')
 
 module.exports = [Object.assign({}, baseConfig, {
   plugins: baseConfig.plugins.concat([
-    new ExtractTextPlugin('[name].css')
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    })
+
   ]),
   devtool: 'source-map'
 }), {
@@ -13,15 +17,15 @@ module.exports = [Object.assign({}, baseConfig, {
     htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+      use: ['style-loader', 'css-loader']
     }, {
       test: /\.scss$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
+      use: ['style-loader', 'sass-loader']
     }, {
       test: /\.less$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
+      use: ['style-loader', 'less-loader']
     }]
   },
   output: {
@@ -30,6 +34,8 @@ module.exports = [Object.assign({}, baseConfig, {
     filename: '[name].js'
   },
   plugins: [
-    new ExtractTextPlugin('html.min.css')
+    new MiniCssExtractPlugin({
+      filename: 'html.min.css'
+    })
   ]
 }]

webpack.production.js

@@ -1,54 +1,46 @@
 var baseConfig = require('./webpackBaseConfig')
 var webpack = require('webpack')
 var path = require('path')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = [Object.assign({}, baseConfig, {
   plugins: baseConfig.plugins.concat([
     new webpack.DefinePlugin({
       'process.env': {
         '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: {
     path: path.join(__dirname, 'public/build'),
     publicPath: '/build/',
-    filename: '[id].[name].[hash].js',
-    baseUrl: '<%- url %>'
+    filename: '[id].[name].[hash].js'
+    // baseUrl: '<%- url %>'
   }
 }), {
+  // This Chunk is used in the 'save as html' feature.
+  // It is embedded in the html file and contains CSS for styling.
+
   entry: {
     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: {
     path: path.join(__dirname, 'public/build'),
     publicPath: '/build/',
@@ -60,7 +52,24 @@ module.exports = [Object.assign({}, baseConfig, {
         'NODE_ENV': JSON.stringify('production')
       }
     }),
-    new ExtractTextPlugin('html.min.css'),
-    new OptimizeCssAssetsPlugin()
-  ]
+    new MiniCssExtractPlugin({
+      filename: 'html.min.css'
+    })
+  ],
+
+  optimization: {
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
+
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader'
+      ]
+    }]
+  }
 }]