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
95 lines
2.4 KiB
12 months ago
|
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: 'asset/resource',
|
||
|
generator: {
|
||
|
filename: './public/css/font/[name][ext]',
|
||
|
}
|
||
|
},
|
||
|
// loader for images and icons (only required if css references image files)
|
||
|
{
|
||
|
test: /\.(png|jpg|gif)$/,
|
||
|
type: 'asset/resource',
|
||
|
generator: {
|
||
|
filename: './public/css/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(),
|
||
|
]
|
||
|
},
|
||
|
}
|
||
|
};
|