Update dependencies

main.config.js

@@ -5,10 +5,11 @@ const path = require('path')
  * All file will be passed to your webpack config.
  * Formatted as { input: output }
  * paths are relative to your project root (__dirname)
+ * The builds folder in www/assets is auto cleaned after each build.
  */
 const entries = {
-  'src/index.js': 'www/assets/bundle.js',
-  'src/index.less': 'www/assets/bundle.css'
+  'src/index.js': 'www/assets/builds/bundle.js',
+  'src/index.less': 'www/assets/builds/bundle.css'
 }
 
 /**
@@ -75,6 +76,14 @@ const devServer = {
   // Use the proxy opt if you can't use / don't want to use a built-in php serv.
   phpBinary: 'php',
 
+  // Host used by the php built-in server. Only used when proxy is false.
+  // Default is localhost.
+  // On Mac, the default will be [::1] (IPv6 equivalent of localhost)
+  // See: http://php.net/manual/en/features.commandline.webserver.php#120449
+  // You might need to change config/config.localhost.php into config.[YOURHOST].php
+  // In order for kirby-webpack to continue working with your host
+  phpHost: 'localhost',
+
   // Set this to true to display PHP logs in your terminal
   // /!\ does nothing if you use the `proxy` option
   logPhpErrors: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kirby-webpack",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "A kirby starter-kit with modern frontend tools",
   "main": "index.js",
   "scripts": {
@@ -30,36 +30,37 @@
   "homepage": "https://github.com/brocessing/kirby-webpack#readme",
   "devDependencies": {
     "@pqml/node-php-server": "^0.3.1",
-    "autoprefixer": "^7.2.5",
+    "autoprefixer": "^8.2.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
-    "browser-sync": "^2.23.5",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.16.0",
-    "eslint-config-standard": "^11.0.0-beta.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-promise": "^3.6.0",
+    "browser-sync": "^2.23.6",
+    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
     "fs-extra": "^5.0.0",
     "github-download": "^0.5.0",
     "kool-shell": "^1.5.0",
-    "less": "^3.0.0-alpha.3",
-    "less-loader": "^4.0.5",
-    "postcss-loader": "^2.0.10",
-    "progress-bar-webpack-plugin": "^1.10.0",
-    "resolve-url-loader": "^2.2.1",
-    "style-loader": "^0.19.1",
+    "less": "^3.0.1",
+    "less-loader": "^4.1.0",
+    "postcss-loader": "^2.1.3",
+    "progress-bar-webpack-plugin": "^1.11.0",
+    "resolve-url-loader": "^2.3.0",
+    "style-loader": "^0.20.3",
     "tail": "^1.2.3",
-    "webpack": "^3.10.0",
-    "webpack-dev-middleware": "^2.0.4",
-    "webpack-hot-middleware": "^2.21.0",
-    "webpack-merge": "^4.1.1"
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.5.0",
+    "webpack-dev-middleware": "^3.1.2",
+    "webpack-hot-middleware": "^2.21.2",
+    "webpack-merge": "^4.1.2"
   },
   "dependencies": {}
 }

scripts/webpack-build.js

@@ -1,8 +1,11 @@
 const startTime = new Date()
 
+const fs = require('fs-extra')
+const path = require('path')
 const webpack = require('webpack')
 const webpackConfig = require('../webpack.config.prod')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const user = require('./utils/format-config')(require('../main.config.js'))
 
 const sh = require('kool-shell')()
   .use(require('kool-shell/plugins/log'))
@@ -19,14 +22,15 @@ compiler.apply(
 )
 
 Promise.resolve()
+  .then(() => fs.remove(path.join(user.paths.kirby.assets, 'builds')))
   .then(() => sh.log('Running the webpack compiler...'))
   .then(
     () =>
       new Promise((resolve, reject) => {
         compiler.run((err, stats) => {
-          stats.compilation.modules.forEach((module => {
+          stats.compilation.modules.forEach(module => {
             if (module.error) return reject(module.error)
-          }))
+          })
           if (!err) resolve(stats)
           else reject(err)
         })

scripts/webpack-serve.js

@@ -1,11 +1,14 @@
 const fs = require('fs-extra')
 const path = require('path')
+const os = require('os')
 const browserSync = require('browser-sync')
 const webpack = require('webpack')
 const webpackConfig = require('../webpack.config.dev')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const webpackHotMiddleware = require('webpack-hot-middleware')
 
+const isMacOS = (os.platform() === 'darwin')
+
 const php = require('@pqml/node-php-server')
 
 const Tail = require('tail').Tail
@@ -52,7 +55,7 @@ function phpInit () {
 
   phpServer = php({
     bin: user.devServer.phpBinary || 'php',
-    host: 'localhost',
+    host: user.devServer.phpHost || 'localhost',
     root: user.paths.www,
     verbose: false,
     promptBinary: true,
@@ -64,8 +67,8 @@ function phpInit () {
     // php server can't be reach through localhost, we have to use [::1]
     sh.log('PHP Server started on ' + host + ':' + port + '\n')
 
-    if (host === 'localhost') {
-      sh.warn('\nNode can\'t reach PHP built-in server through localhost.\nProxying [::1]:' + port + ' instead.')
+    if (isMacOS && host === 'localhost') {
+      sh.warn('\nOn MacOS / OSX, Node can\'t reach PHP built-in server through localhost.\nProxying [::1]:' + port + ' instead.')
       host = '[::1]'
     }
 

webpack.config.common.js

@@ -1,4 +1,5 @@
 const user = require('./scripts/utils/format-config')(require('./main.config.js'))
+const { EnvironmentPlugin } = require('webpack')
 
 const CSSLoaders = [
   {
@@ -49,7 +50,9 @@ const webpack = {
       }
     ]
   },
-  plugins: []
+  plugins: [
+    new EnvironmentPlugin(['NODE_ENV'])
+  ]
 }
 
 module.exports = { CSSLoaders, webpack, user }

webpack.config.dev.js

@@ -8,7 +8,8 @@ const cssLoaders = (
     {
       loader: 'style-loader',
       options: {
-        sourceMap: true
+        sourceMap: true,
+        singleton: true // avoid CSS Flashing
       }
     }
   ].concat(common.CSSLoaders)
@@ -31,6 +32,7 @@ if (user.css.preprocessorLoader) {
 }
 
 const devConfig = {
+  mode: 'development',
   entry: user.entries,
   module: {
     rules: [
@@ -51,6 +53,7 @@ const devConfig = {
   },
   plugins: [
     new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
   ],
   devtool: '#eval-source-map'

webpack.config.prod.js

@@ -2,10 +2,14 @@ const path = require('path')
 const webpack = require('webpack')
 const merge = require('webpack-merge')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+const UglifyPlugin = require('uglifyjs-webpack-plugin')
+
 const common = require('./webpack.config.common')
 const user = require('./scripts/utils/format-config')(require('./main.config.js'))
 
 const prodConfig = {
+  mode: 'production',
   entry: user.entries,
   module: {
     rules: [
@@ -19,6 +23,9 @@ const prodConfig = {
     ]
   },
   plugins: [
+    new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
+    new webpack.optimize.ModuleConcatenationPlugin(),
+
     // Extract all css into one file
     new ExtractTextPlugin({
       filename: (getPath) => {
@@ -34,17 +41,21 @@ const prodConfig = {
     }),
 
     // Minification and size optimization
-    new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': '"production"' } }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: { warnings: false, screw_ie8: true, drop_console: true },
-      output: { comments: false },
-      mangle: { screw_ie8: true },
-      sourceMap: true
+    new UglifyPlugin({
+      sourceMap: true,
+      parallel: true,
+      uglifyOptions: {
+        mangle: true,
+        keep_classnames: true,
+        keep_fnames: false,
+        compress: { inline: false, drop_console: true },
+        output: { comments: false }
+      }
     }),
+
     new webpack.optimize.OccurrenceOrderPlugin()
   ],
-  devtool: '#source-map',
-  bail: true
+  devtool: '#source-map'
 }
 
 module.exports = merge(common.webpack, prodConfig)

www/site/snippets/footer.php

@@ -1,3 +1,3 @@
-  <?php echo js('assets/bundle.js') ?>
+  <?php echo js('assets/builds/bundle.js') ?>
   </body>
 </html>

www/site/snippets/header.php

@@ -5,6 +5,6 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
   <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
-  <?php echo liveCSS('assets/bundle.css') ?>
+  <?php echo liveCSS('assets/builds/bundle.css') ?>
 </head>
 <body>