Personal_Website/webpack.config.js
2022-05-26 13:10:32 +02:00

76 lines
2.3 KiB
JavaScript

const fs = require('fs');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function getPugHtmlPluginEntries(basepath) {
const pugTemplateFiles = fs.readdirSync(basepath)
.filter(file => path.extname(file).toLowerCase() === '.pug');
return pugTemplateFiles.map(pugFileName => new HtmlWebpackPlugin({
inject: true,
hash: false,
filename: `${path.parse(pugFileName).name}.html`,
template: path.join(basepath, pugFileName),
}));
}
module.exports = (env, argv) => {
const isDevelopment = argv.mode === 'development';
return {
entry: {
app: './src/js/app.js',
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].bundle.js",
},
devServer: {
port: 3000,
},
plugins: [
...getPugHtmlPluginEntries('./src'),
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.pug$/,
use: ["pug-loader"],
},
{
test: /\.scss$/,
use: [
isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sourceMap: isDevelopment,
},
},
],
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
},
}
],
}
],
},
resolve: {
extensions: ['.js', '.scss'],
},
};
}