Commit aa250b59 authored by Jure's avatar Jure

refactor: deduplicate and optimize webpack config

parent ee40c4b1
......@@ -25,15 +25,14 @@ module.exports = [
},
include: babelIncludes,
},
{ test: /\.png$/, loader: 'url-loader' },
{ test: /\.png|\.jpg$/, loader: 'url-loader' },
{
test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
loader: [
{
loader: 'url-loader',
options: {
prefix: 'font',
limit: 1000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
......@@ -61,9 +60,6 @@ module.exports = [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
......
......@@ -18,13 +18,17 @@ module.exports = (opts = {}) => {
new HtmlWebpackPlugin({
title: 'PubSweet Starter App',
template: '../client/index.ejs', // Load a custom template
inject: 'body', // Inject all scripts into the body
}),
)
}
if (opts.extractText) {
plugins.push(new MiniCssExtractPlugin())
plugins.push(
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
)
}
if (opts.noEmitOnErrors) {
......@@ -53,7 +57,7 @@ module.exports = (opts = {}) => {
}
plugins.push(
new CopyWebpackPlugin([{ from: '../static' }]),
new CopyWebpackPlugin([{ from: '../public' }]),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new CompressionPlugin(),
......
const path = require('path')
const fs = require('fs-extra')
const config = require('config')
const { pick } = require('lodash')
const rules = require('./common-rules')
const contentBase = path.resolve(__dirname, '..', 'client', 'dist')
// can't use node-config in webpack so save whitelisted client config into the build and alias it below
const clientConfig = pick(config, config.publicKeys)
fs.ensureDirSync(contentBase)
const clientConfigPath = path.join(contentBase, 'client-config.json')
fs.writeJsonSync(clientConfigPath, clientConfig, { spaces: 2 })
const plugins = require('./plugins')
module.exports = webpackEnv => {
const isEnvDevelopment = webpackEnv === 'development'
const isEnvProduction = webpackEnv === 'production'
return {
devServer: {
port: 9000,
hot: true,
contentBase: path.join(contentBase, 'public'),
publicPath: '/',
proxy: {
'/api': 'http://localhost:3000',
'/graphql': 'http://localhost:3000',
},
historyApiFallback: true,
},
name: 'client application',
target: 'web',
mode: webpackEnv,
context: path.join(__dirname, '..', 'client'),
entry: {
app: isEnvDevelopment ? ['react-hot-loader/patch', './app'] : ['./app'],
},
output: {
path: contentBase,
publicPath: '/',
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
},
devtool: 'cheap-module-source-map',
module: {
rules,
},
resolve: {
alias: {
joi: 'joi-browser',
config: clientConfigPath,
},
extensions: ['.js', '.jsx', '.json', '.scss'],
enforceExtension: false,
},
plugins: plugins({
hmr: isEnvDevelopment,
html: true,
noEmitOnErrors: true,
extractText: isEnvProduction,
env: webpackEnv,
}),
}
}
const path = require('path')
const fs = require('fs-extra')
const config = require('config')
const { pick } = require('lodash')
const rules = require('./common-rules')
const contentBase = path.resolve(__dirname, '..', 'client', 'dist')
// can't use node-config in webpack so save whitelisted client config into the build and alias it below
const clientConfig = pick(config, config.publicKeys)
fs.ensureDirSync(contentBase)
const clientConfigPath = path.join(contentBase, 'client-config.json')
fs.writeJsonSync(clientConfigPath, clientConfig, { spaces: 2 })
const plugins = require('./plugins')
module.exports = [
{
devServer: {
port: 9000,
hot: true,
contentBase,
proxy: {
'/api': 'http://localhost:3000',
'/graphql': 'http://localhost:3000',
},
historyApiFallback: true,
},
name: 'client application',
target: 'web',
mode: 'development',
context: path.join(__dirname, '..', 'client'),
entry: {
app: ['react-hot-loader/patch', 'webpack-hot-middleware/client', './app'],
},
output: {
path: contentBase,
filename: '[name].js',
},
devtool: 'cheap-module-source-map',
module: {
rules,
},
resolve: {
alias: {
joi: 'joi-browser',
config: clientConfigPath,
},
extensions: ['.js', '.jsx', '.json', '.scss'],
enforceExtension: false,
},
plugins: plugins({
hmr: true,
html: true,
noEmitOnErrors: true,
extractText: false,
optimize: true,
env: 'development',
}),
node: {
fs: 'empty',
__dirname: true,
},
},
]
module.exports = require('./webpack.config.js')('development')
const path = require('path')
const fs = require('fs-extra')
const config = require('config')
const { pick } = require('lodash')
const rules = require('./common-rules')
const outputPath = path.resolve(__dirname, '..', 'client', 'dist')
// can't use node-config in webpack so save whitelisted client config into the build and alias it below
const clientConfig = pick(config, config.publicKeys)
fs.ensureDirSync(outputPath)
const clientConfigPath = path.join(outputPath, 'client-config.json')
fs.writeJsonSync(clientConfigPath, clientConfig, { spaces: 2 })
const plugins = require('./plugins')
module.exports = [
{
// The configuration for the client
name: 'client application',
mode: 'production',
target: 'web',
context: path.join(__dirname, '..', 'client'),
entry: {
app: ['./client'],
},
output: {
path: outputPath,
filename: '[name].[hash].js',
},
module: {
rules,
},
resolve: {
alias: {
joi: 'joi-browser',
config: clientConfigPath,
},
extensions: ['.js', '.jsx', '.json', '.scss'],
},
plugins: plugins({
hmr: false,
html: true,
extractText: true,
optimize: true,
env: 'production',
}),
node: {
fs: 'empty',
__dirname: true,
},
},
]
module.exports = require('./webpack.config.js')('production')
const path = require('path')
const fs = require('fs-extra')
const config = require('config')
const { pick } = require('lodash')
const rules = require('./common-rules')
const outputPath = path.resolve(__dirname, '..', 'client', 'dist')
// can't use node-config in webpack so save whitelisted client config into the build and alias it below
const clientConfig = pick(config, config.publicKeys)
fs.ensureDirSync(outputPath)
const clientConfigPath = path.join(outputPath, 'client-config.json')
fs.writeJsonSync(clientConfigPath, clientConfig, { spaces: 2 })
const plugins = require('./plugins')
module.exports = [
{
// The configuration for the client
name: 'client application',
mode: 'development',
target: 'web',
context: path.join(__dirname, '..', 'client'),
entry: {
app: [
'react-hot-loader/patch',
'webpack-hot-middleware/client',
'./client',
],
},
output: {
path: outputPath,
filename: '[name].js',
},
module: {
rules,
},
resolve: {
alias: {
joi: 'joi-browser',
config: clientConfigPath,
},
extensions: ['.js', '.jsx', '.json', '.scss'],
enforceExtension: false,
},
plugins: plugins({
hmr: true,
html: true,
noEmitOnErrors: true,
extractText: false,
optimize: true,
env: 'test',
}),
node: {
fs: 'empty',
__dirname: true,
},
},
]
module.exports = require('./webpack.config.js')('production')
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment