Update webpack configs

2019-03-27 19:10:50 +01:00 · 2019-03-27 19:10:50 +01:00 · d3a3e159af
parent 03e63e1806
commit d3a3e159af
7 changed files with 166 additions and 145 deletions
--- a/package.json
+++ b/package.json
@ -4,7 +4,9 @@
  "description": "portfolio",
  "main": "index.js",
  "scripts": {
-    "build": "NODE_ENV=production webpack -p --progress",
+    "build": "npm run build-client && npm run build-server",
+    "build-client": "NODE_ENV=production webpack --config webpack.client.js -p --progress",
+    "build-server": "NODE_ENV=production webpack --config webpack.server.js -p --progress",
    "start": "NODE_ENV=production node ./build/server.js",
    "start-dev": "NODE_ENV=development babel-node ./src/server.js"
  },
@ -17,6 +19,7 @@
  "dependencies": {
    "async": "^2.5.0",
    "express": "^4.13.4",
+    "express-static-gzip": "^1.1.3",
    "front-matter": "^2.2.0",
    "jsonfile": "^4.0.0",
    "markdown-it": "^8.4.2",
--- a/src/server.js
+++ b/src/server.js
@ -1,4 +1,5 @@
 import express from 'express'
+import expressStaticGzip from 'express-static-gzip'
 import { serverRender } from './utils/serverRender'
 import { Scanner } from './utils/scanner'

@ -8,7 +9,7 @@ const app = express()
 const scanner = new Scanner()
 scanner.scan()

-app.use('/static', express.static('public/static'))
+app.use('/static', expressStaticGzip('public/static'))

 app.get('/favicon.ico', (req, res) => {
  res.status(404).send('Not Found !!!')
--- a/src/utils/serverRender.js
+++ b/src/utils/serverRender.js
@ -4,6 +4,7 @@ import { StaticRouter as Router, matchPath } from 'react-router-dom'
 import { App } from '../components'
 import routes from './routes'
 import serialize from 'serialize-javascript'
+import manifest from '../../public/static/manifest.json'

 export function serverRender (req, res, next) {
  const activeRoute = routes.find((route) => matchPath(req.url, route)) || {}
@ -34,13 +35,13 @@ function renderFullPage (html, data) {
          <!-- Font Awesome -->
          <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
          <!-- Stylesheet -->
-          <link href="/static/bundle.css" rel="stylesheet" rel="preload">
+          <link href=${manifest['bundle.css']} rel="stylesheet" rel="preload">
          <!-- Initial Data -->
          <script>window.__INITIAL_DATA__ = ${serialize(data)}</script>
      </head>
      <body>
        <div id="root">${html}</div>
-        <script src="/static/bundle.js" async></script>
+        <script src=${manifest['bundle.js']} async></script>
      </body>
    </html>
    `
--- a/webpack.client.js
+++ b/webpack.client.js
@ -0,0 +1,77 @@
+const { resolve } = require('path')
+const webpack = require('webpack')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CompressionPlugin = require('compression-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+
+const browserConfig = {
+  mode: 'production',
+  entry: {
+    bundle: [
+      './src/app-client.js'
+    ]
+  },
+  output: {
+    path: resolve(__dirname, 'public/static'),
+    filename: '[name].[contenthash].js',
+    publicPath: '/static/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          'babel-loader'
+        ],
+        exclude: '/node_modules/'
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 2,
+              localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: 'postcss-loader'
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        exclude: /node_modules/,
+        loader: 'url-loader',
+        options: {
+          limit: 8192
+        }
+      }
+    ]
+  },
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin(),
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
+  plugins: [
+    new ManifestPlugin(),
+    new webpack.DefinePlugin({ __isBrowser__: 'true' }),
+    new CleanWebpackPlugin(['public/static', 'build'], {}),
+    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
+    new CompressionPlugin({})
+  ],
+  node: { fs: 'empty' }
+}
+
+module.exports = browserConfig
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,140 +0,0 @@
-const { resolve } = require('path')
-const webpack = require('webpack')
-// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-// const CompressionPlugin = require('compression-webpack-plugin')
-const ManifestPlugin = require('webpack-manifest-plugin')
-const CleanWebpackPlugin = require('clean-webpack-plugin')
-const nodeExternals = require('webpack-node-externals')
-const CreateFileWebpack = require('create-file-webpack')
-
-const browserConfig = {
-  mode: 'production',
-  entry: {
-    bundle: [
-      './src/app-client.js'
-    ]
-  },
-  output: {
-    path: resolve(__dirname, 'public/static'),
-    filename: '[name].js',
-    // filename: '[name].[contenthash].js',
-    publicPath: '/static/'
-  },
-  devtool: 'eval-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [
-          'babel-loader'
-        ],
-        exclude: '/node_modules/'
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              importLoaders: 2,
-              localIdentName: '[name]__[local]___[hash:base64:5]'
-            }
-          },
-          {
-            loader: 'postcss-loader'
-          },
-          {
-            loader: 'sass-loader'
-          }
-        ]
-      },
-      {
-        test: /\.(png|jpg)$/,
-        exclude: /node_modules/,
-        loader: 'url-loader',
-        options: {
-          limit: 8192
-        }
-      }
-    ]
-  },
-  plugins: [
-    new webpack.DefinePlugin({ __isBrowser__: 'true' }),
-    new CleanWebpackPlugin(['public/static', 'build'], {}),
-    new MiniCssExtractPlugin(),
-    // new CompressionPlugin({}),
-    new ManifestPlugin()
-  ],
-  node: { fs: 'empty' }
-}
-
-const serverConfig = {
-  entry: './src/server.js',
-  target: 'node',
-  externals: [nodeExternals()],
-  output: {
-    path: resolve(__dirname, 'build'),
-    filename: 'server.js',
-    publicPath: '/'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [
-          'babel-loader'
-        ],
-        exclude: '/node_modules/'
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              exportOnlyLocals: true,
-              importLoaders: 2,
-              localIdentName: '[name]__[local]___[hash:base64:5]'
-            }
-          },
-          {
-            loader: 'postcss-loader'
-          },
-          {
-            loader: 'sass-loader'
-          }
-        ]
-      },
-      {
-        test: /\.(png|jpg)$/,
-        exclude: /node_modules/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000
-        }
-      }
-    ]
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      __isBrowser__: 'false'
-    }),
-    new MiniCssExtractPlugin(),
-    new CreateFileWebpack({
-      path: './src/utils/',
-      fileName: 'data.json',
-      content: JSON.stringify({
-        'posts': [],
-        'other': {}
-      })
-    })
-  ]
-}
-
-module.exports = [browserConfig, serverConfig]
--- a/webpack.server.js
+++ b/webpack.server.js
@ -0,0 +1,72 @@
+const { resolve } = require('path')
+const webpack = require('webpack')
+const nodeExternals = require('webpack-node-externals')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CreateFileWebpack = require('create-file-webpack')
+
+const serverConfig = {
+  entry: './src/server.js',
+  target: 'node',
+  externals: [nodeExternals()],
+  output: {
+    path: resolve(__dirname, 'build'),
+    filename: 'server.js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          'babel-loader'
+        ],
+        exclude: '/node_modules/'
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              exportOnlyLocals: true,
+              importLoaders: 2,
+              localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: 'postcss-loader'
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        exclude: /node_modules/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __isBrowser__: 'false'
+    }),
+    new MiniCssExtractPlugin(),
+    new CreateFileWebpack({
+      path: './src/utils/',
+      fileName: 'data.json',
+      content: JSON.stringify({
+        'posts': [],
+        'other': {}
+      })
+    })
+  ]
+}
+
+module.exports = serverConfig
--- a/yarn.lock
+++ b/yarn.lock
@ -3165,6 +3165,13 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
  dependencies:
    homedir-polyfill "^1.0.1"

+express-static-gzip@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/express-static-gzip/-/express-static-gzip-1.1.3.tgz#345ea02637d9d5865777d6fb57ccc0884abcda65"
+  integrity sha512-k8Q4Dx4PDpzEb8kth4uiPWrBeJWJYSgnWMzNdjQUOsEyXfYKbsyZDkU/uXYKcorRwOie5Vzp4RMEVrJLMfB6rA==
+  dependencies:
+    serve-static "^1.12.3"
+
 express@^4.13.4:
  version "4.16.3"
  resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
@ -7091,7 +7098,7 @@ serialize-javascript@^1.6.1:
  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
  integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==

-serve-static@1.13.2:
+serve-static@1.13.2, serve-static@^1.12.3:
  version "1.13.2"
  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
  dependencies: