Splitting prod configs

This commit is contained in:
Jeff Avallone 2018-03-30 17:05:33 -04:00
parent 5c2b06d4e9
commit a471a33014
4 changed files with 75 additions and 76 deletions

View File

@ -13,8 +13,9 @@
"start": "webpack-dev-server --config webpack.dev.js",
"start:prod": "run-s build start:http-server",
"start:http-server": "http-server ./build",
"build": "cross-env NODE_ENV=production run-s build:webpack build:prerender",
"build:webpack": "webpack --config webpack.prod.js",
"build": "cross-env NODE_ENV=production run-s build:webpack:web build:webpack:prerender build:prerender",
"build:webpack:web": "webpack --config webpack.prod-web.js",
"build:webpack:prerender": "webpack --config webpack.prod-prerender.js",
"build:prerender": "node ./script/__build__/prerender.js",
"test": "run-s test:lint 'test:unit --coverage'",
"test:unit": "cross-env NODE_ENV=production jest",

40
webpack.prod-prerender.js Normal file
View File

@ -0,0 +1,40 @@
const path = require('path');
const webpack = require('webpack');
const common = require('./webpack.common.js');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'production',
target: 'node',
externals: [nodeExternals({
whitelist: [ /\.svg$/ ]
})],
entry: {
prerender: './script/prerender.js'
},
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname, 'script/__build__')
},
resolve: {
modules: ['src', 'node_modules']
},
plugins: [
// Only want the EnvironmentPlugin
common.plugins.find(plugin => plugin instanceof webpack.EnvironmentPlugin)
],
module: {
rules: [
// Replace the rule for CSS files
{
test: /\.css$/,
loader: 'css-loader/locals',
options: {
modules: true
}
},
...common.module.rules.filter(rule => !rule.test.test('file.css'))
]
}
};

32
webpack.prod-web.js Normal file
View File

@ -0,0 +1,32 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { GenerateSW } = require('workbox-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new GenerateSW({
clientsClaim: true,
skipWaiting: true,
runtimeCaching: [
{
urlPattern: /https?:\/\/licensebuttons\.net/,
handler: 'staleWhileRevalidate'
},
{
urlPattern: /https?:\/\/fonts\.googleapis\.com/,
handler: 'staleWhileRevalidate'
},
{
urlPattern: /https?:\/\/fonts\.gstatic\.com/,
handler: 'staleWhileRevalidate'
}
]
})
]
});

View File

@ -1,74 +0,0 @@
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { GenerateSW } = require('workbox-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = [
// Web
merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new GenerateSW({
clientsClaim: true,
skipWaiting: true,
runtimeCaching: [
{
urlPattern: /https?:\/\/licensebuttons\.net/,
handler: 'staleWhileRevalidate'
},
{
urlPattern: /https?:\/\/fonts\.googleapis\.com/,
handler: 'staleWhileRevalidate'
},
{
urlPattern: /https?:\/\/fonts\.gstatic\.com/,
handler: 'staleWhileRevalidate'
}
]
})
]
}),
// Node (prerender)
{
mode: 'production',
target: 'node',
externals: [nodeExternals({
whitelist: [ /\.svg$/ ]
})],
entry: {
prerender: './script/prerender.js'
},
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname, 'script/__build__')
},
resolve: {
modules: ['src', 'node_modules']
},
plugins: [
// Only want the EnvironmentPlugin
common.plugins.find(plugin => plugin instanceof webpack.EnvironmentPlugin)
],
module: {
rules: [
// Replace the rule for CSS files
{
test: /\.css$/,
loader: 'css-loader/locals',
options: {
modules: true
}
},
...common.module.rules.filter(rule => !rule.test.test('file.css'))
]
}
}
];