Skip to content

Instantly share code, notes, and snippets.

@jknopp
Created January 6, 2021 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jknopp/d12898501f38de0c68808748f4d100d5 to your computer and use it in GitHub Desktop.
Save jknopp/d12898501f38de0c68808748f4d100d5 to your computer and use it in GitHub Desktop.
Example Webpack config
// https://github.com/PButcher/flipdown
import { FlipDown } from 'flipdown';
const path = require('path');
const glob = require('glob-all')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const webpack = require('webpack');
const PurifyCSSPlugin = require('purifycss-webpack')
const BUILD_DROP_PATH = path.resolve(__dirname, './ClientName/Content/dist');
// may need html-loader for cdn
module.exports = {
stats: 'errors-warnings',
entry: {
site: './ClientName/Content/js/index.js',
gameIndex: './ClientName/Content/js/gameIndex.js',
appInsights: './ClientName/Content/js/appInsights.js',
},
output: {
filename: '[name].[contenthash:8].js',
path: BUILD_DROP_PATH,
pathinfo: false
},
resolve: {
extensions: ['.js', '.scss', '.cshtml'],
alias: {
jquery: path.resolve(__dirname, './ClientName/Kentico/Scripts/jquery-3.3.1.js')
}
},
performance: {
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js') || assetFilename.endsWith('.css');
}
},
externals: {},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
},
minimizer: [
new TerserJSPlugin({
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'ClientName/Content/scss'),
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
include: path.resolve(__dirname, 'ClientName/Content/fonts'),
use: ['file-loader']
},
{
test: /flipdown\.js$/,
use: {
loader: 'exports-loader',
options: {
exports: 'FlipDown'
}
}
}]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css'
}),
new webpack.HashedModuleIdsPlugin(),
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, 'ClientName/**/*.cshtml'),
path.join(__dirname, 'ClientName/Content/js/*.js')
]),
minimize: true,
purifyOptions: {
whitelist: [
'*-campaign*'
]
}
}),
new AssetsPlugin({
filename: 'webpack.assets.json',
path: BUILD_DROP_PATH,
prettyPrint: true
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment