Skip to content

Instantly share code, notes, and snippets.

@Gabson1
Last active Apr 13, 2021
Embed
What would you like to do?
Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const rootPathResolver = (targetPath) => path.resolve(process.cwd(), targetPath);
module.exports = {
devtool: 'source-map',
context: rootPathResolver('./src/app'),
mode: process.env.NODE_ENV !== 'production'
? 'development'
: 'production',
entry: (process.env.NODE_ENV !== 'production'
? ['babel-polyfill', 'webpack-hot-middleware/client?noInfo=true&reload=true', './index.jsx']
: ['babel-polyfill', './index.jsx']),
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: 'chunks/[name].[chunkhash].js',
sourceMapFilename: 'sourceMaps/[name].[fullhash].map',
assetModuleFilename: 'assets/[hash][ext][query]',
path: rootPathResolver('dist'),
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
joi: 'joi-browser',
test: rootPathResolver('test/'),
hooks: rootPathResolver('src/app/hooks/'),
shared: rootPathResolver('src/app/shared/'),
assets: rootPathResolver('src/app/assets/'),
contexts: rootPathResolver('src/app/components/contexts/'),
sharedComponents: rootPathResolver('src/app/components/shared/'),
},
fallback: {
stream: require.resolve('stream-browserify'),
crypto: require.resolve('crypto-browserify'),
// buffer: require.resolve('buffer'),
},
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
// DefinePlugin:
// Allows you to create global constants which can be configured at compile time
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
// CompressionPlugin:
// Turns the bundled files into compressed (gzip) files
new CompressionPlugin(),
// MiniCssExtractPlugin:
// Extracts CSS into separate files, per JS file which contains CSS
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
// HtmlWebpackPlugin: Generate html file
// Here we are using a template file, which webpack will use +
// inject the required script tags for the main js files
new HtmlWebpackPlugin({
template: rootPathResolver('src/app/index.html'),
inject: 'body',
}),
],
module: {
rules: [
// Sassy files need a combination of various loaders
{
test: /\.(scss|sass)$/,
use: [
{
loader: process.env.NODE_ENV !== 'production'
? 'style-loader'
: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
includePaths: [
rootPathResolver('node_modules'),
],
},
},
],
},
// Babel-loader:
// to transpile javascript files into browser-readable static files
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: /node-modules/,
},
// asset/inline:
// SVGs: Inline files
{
test: /\.svg$/,
type: 'asset/inline',
},
// asset/resource:
// Copy image files to build folder
{
test: /\.(woff(2)?|eot|ttf|otf|)$/,
type: 'asset/resource',
},
// graphql-tag/loader:
// Helpful utilities for parsing GraphQL queries
{
test: /\.(graphql|gql)$/,
use: 'graphql-tag/loader',
exclude: /node_modules/,
},
// style-loader && css-loader:
// to handle css files
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
// asset/resource:
// Copy image files to build folder
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment