You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
2.4 KiB

const path = require('path');
// css extraction and minification
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// clean out build dir in-between builds
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = (env, argv) => {
return {
entry: {
'main': [
'./src/assets/js/main.js',
'./src/assets/sass/main.scss'
]
},
target: ['web', 'es5'],
output: {
filename: './public/js/[name].min.js',
path: path.resolve(__dirname)
},
devtool: "source-map",
module: {
rules: [
// js babelization
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
},
// sass compilation
{
test: /\.(sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
}
]
},
// loader for webfonts (only required if loading custom fonts)
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'src/assets/fonts',
generator: {
filename: './public/fonts/[name][ext]',
}
},
// loader for images and icons (only required if css references image files)
{
test: /\.(png|jpg|gif)$/,
type: 'src/assets/img',
generator: {
filename: './public/img/[name][ext]',
}
},
]
},
plugins: [
// clear out build directories on each build
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'./public/js/*',
'./public/css/*'
]
}),
// css extraction into dedicated file
new MiniCssExtractPlugin({
filename: './public/css/main.min.css'
}),
],
optimization: {
// minification - only performed when mode = production
minimizer: [
// js minification - special syntax enabling webpack 5 default terser-webpack-plugin
`...`,
// css minification
new CssMinimizerPlugin(),
]
},
}
};