diff --git a/package.json b/package.json index a8a816c..684f186 100644 --- 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", diff --git a/src/server.js b/src/server.js index e907684..db4d478 100644 --- 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 !!!') diff --git a/src/utils/serverRender.js b/src/utils/serverRender.js index dd57588..a4f7628 100644 --- 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) { - +
${html}
- + ` diff --git a/webpack.client.js b/webpack.client.js new file mode 100644 index 0000000..dd7d889 --- /dev/null +++ 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 diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 48b9b72..0000000 --- a/webpack.config.js +++ /dev/null @@ -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] diff --git a/webpack.server.js b/webpack.server.js new file mode 100644 index 0000000..8242814 --- /dev/null +++ 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 diff --git a/yarn.lock b/yarn.lock index 234b63d..24b29c0 100644 --- 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: