Skip to content

Instantly share code, notes, and snippets.

@marvindanig
Created February 28, 2020 21:26
Show Gist options
  • Save marvindanig/6d064afbab88b0832345876457580043 to your computer and use it in GitHub Desktop.
Save marvindanig/6d064afbab88b0832345876457580043 to your computer and use it in GitHub Desktop.
webpack -– shit gets real where it isn't even expected to.
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer)
} else if (m.name) {
return m.name
} else {
return false
}
}
const postcss = {
loader: 'postcss-loader',
options: {
plugins() { return [autoprefixer({ browsers: 'last 3 versions' })] }
}
}
module.exports = {
entry: {
portrait: path.resolve(`${__dirname}/public/style/portrait.scss`),
landscape: path.resolve(`${__dirname}/public/style/landscape.scss`),
App: path.resolve(`${__dirname}/public/javascripts/goose-app.js`)
},
mode: 'development',
devtool: 'source-map',
optimization: {
splitChunks: {
cacheGroups: {
portraitStyles: {
name: 'portrait',
test: (m, c, entry = 'portrait') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
landscapeStyles: {
name: 'landscape',
test: (m, c, entry = 'landscape') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new FixStyleOnlyEntriesPlugin(),
new MiniCssExtractPlugin()
],
output: {
path: path.resolve(__dirname, 'public', 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader:'sass-loader' },
{ loader: 'style-loader' },
{ loader: 'css-loader' }
],
include: path.resolve(__dirname, 'public', 'style', 'toucaan')
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: './dist/hashed'
}
}
]
}
],
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment