Skip to content

Instantly share code, notes, and snippets.

@araphiel

araphiel/webpack.config.js

Last active May 27, 2020
Embed
What would you like to do?
Basic Webpack Setup (SASS + Babel)
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const fg = require('fast-glob')
module.exports = async (env, argv) => {
const entries = await fg([
'src/js/*.js',
'src/scss/*.scss',
])
const dynamicEntry = entries.reduce((acc, entry) => {
const absolute = path.resolve(__dirname, entry)
const name = path.parse(absolute).name
return { ...acc, [name]: absolute }
}, {})
return {
entry: dynamicEntry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'assets', 'dist'),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: 'assets/styles' }
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require("sass")
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['assets/dist']
}),
new FriendlyErrorsWebpackPlugin(),
],
optimization: {
splitChunks: {
chunks: 'all'
},
minimizer: [new UglifyJsPlugin()]
},
performance: {
maxEntrypointSize: 400000
},
watchOptions: {
ignored: ['node_modules']
},
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.