Skip to content

Instantly share code, notes, and snippets.

@geroylaurence
Last active January 7, 2021 01:39
Show Gist options
  • Save geroylaurence/5f2a2ec7ad8f18333a40537cf598b444 to your computer and use it in GitHub Desktop.
Save geroylaurence/5f2a2ec7ad8f18333a40537cf598b444 to your computer and use it in GitHub Desktop.
Webpack 4 Config
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const WriteFilePlugin = require('write-file-webpack-plugin')
const res = p => path.resolve(__dirname, p)
const nodeModules = res('../node_modules')
const entry = res('../server/render.js')
const output = res('../buildServer')
// if you're specifying externals to leave unbundled, you need to tell Webpack
// to still bundle `react-universal-component`, `webpack-flush-chunks` and
// `require-universal-module` so that they know they are running
// within Webpack and can properly make connections to client modules:
const externals = fs
.readdirSync(nodeModules)
.filter(x => !/\.bin|react-universal-component|webpack-flush-chunks/.test(x))
.reduce((externals, mod) => {
externals[mod] = `commonjs ${mod}`
return externals
}, {})
externals['react-dom/server'] = 'commonjs react-dom/server'
module.exports = {
name: 'server',
devtool: 'source-map',
target: 'node',
mode: 'development',
entry: ['regenerator-runtime/runtime.js', entry],
externals,
output: {
path: output,
filename: '[name].js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.styl$/,
exclude: /node_modules/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
exportOnlyLocals: true
}
},
{
loader: 'stylus-loader'
}
]
},
{ // CSS
test: /\.(css|scss)$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
},
{ // Assets
test: /\.(png|svg|jpg|otf|mp4|gif|ttf|eot|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: '/static',
},
},
],
},
]
},
resolve: {
extensions: ['.js', '.css', '.styl']
},
plugins: [
new WriteFilePlugin(),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment