Mathis
/
namesny-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update webpack configs

This commit is contained in:
LordMathis 2019-03-27 19:10:50 +01:00
parent 03e63e1806
commit d3a3e159af
7 changed files with 166 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -4,7 +4,9 @@
"description": "portfolio", "description": "portfolio",
"main": "index.js", "main": "index.js",
"scripts": { "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": "NODE_ENV=production node ./build/server.js",
"start-dev": "NODE_ENV=development babel-node ./src/server.js" "start-dev": "NODE_ENV=development babel-node ./src/server.js"
}, },
@ -17,6 +19,7 @@
"dependencies": { "dependencies": {
"async": "^2.5.0", "async": "^2.5.0",
"express": "^4.13.4", "express": "^4.13.4",
"express-static-gzip": "^1.1.3",
"front-matter": "^2.2.0", "front-matter": "^2.2.0",
"jsonfile": "^4.0.0", "jsonfile": "^4.0.0",
"markdown-it": "^8.4.2", "markdown-it": "^8.4.2",

3
src/server.js
View File

@ -1,4 +1,5 @@
import express from 'express' import express from 'express'
import expressStaticGzip from 'express-static-gzip'
import { serverRender } from './utils/serverRender' import { serverRender } from './utils/serverRender'
import { Scanner } from './utils/scanner' import { Scanner } from './utils/scanner'
@ -8,7 +9,7 @@ const app = express()
const scanner = new Scanner() const scanner = new Scanner()
scanner.scan() scanner.scan()
app.use('/static', express.static('public/static')) app.use('/static', expressStaticGzip('public/static'))
app.get('/favicon.ico', (req, res) => { app.get('/favicon.ico', (req, res) => {
res.status(404).send('Not Found !!!') res.status(404).send('Not Found !!!')

5
src/utils/serverRender.js
View File

@ -4,6 +4,7 @@ import { StaticRouter as Router, matchPath } from 'react-router-dom'
import { App } from '../components' import { App } from '../components'
import routes from './routes' import routes from './routes'
import serialize from 'serialize-javascript' import serialize from 'serialize-javascript'
import manifest from '../../public/static/manifest.json'
export function serverRender (req, res, next) { export function serverRender (req, res, next) {
const activeRoute = routes.find((route) => matchPath(req.url, route)) || {} const activeRoute = routes.find((route) => matchPath(req.url, route)) || {}
@ -34,13 +35,13 @@ function renderFullPage (html, data) {
<!-- Font Awesome --> <!-- 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"> <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 --> <!-- Stylesheet -->
<link href="/static/bundle.css" rel="stylesheet" rel="preload"> <link href=${manifest['bundle.css']} rel="stylesheet" rel="preload">
<!-- Initial Data --> <!-- Initial Data -->
<script>window.__INITIAL_DATA__ = ${serialize(data)}</script> <script>window.__INITIAL_DATA__ = ${serialize(data)}</script>
</head> </head>
<body> <body>
<div id="root">${html}</div> <div id="root">${html}</div>
<script src="/static/bundle.js" async></script> <script src=${manifest['bundle.js']} async></script>
</body> </body>
</html> </html>
` `

77
webpack.client.js Normal file
View File

@ -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

140
webpack.config.js
View File

@ -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]

72
webpack.server.js Normal file
View File

@ -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

9
yarn.lock
View File

@ -3165,6 +3165,13 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
dependencies: dependencies:
homedir-polyfill "^1.0.1" 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: express@^4.13.4:
version "4.16.3" version "4.16.3"
resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53" 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" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw== integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
serve-static@1.13.2: serve-static@1.13.2, serve-static@^1.12.3:
version "1.13.2" version "1.13.2"
resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1" resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
dependencies: dependencies: