"use strict";
// Standart settings
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");
const path = require("path");
// Additional plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackImagesResizer = require('webpack-images-resizer');
const SvgStore = require("webpack-svgstore-plugin");
const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const PATHS = {
src: path.join(__dirname, './src'),
dist: path.join(__dirname, './dist'),
assets: './'
}
// webpack
const conf = module.exports = {
// externals: {
// paths: PATHS
// },
entry: {
script: path.join(PATHS.src, "/js/script.js"),
},
output: {
filename: path.join(PATHS.assets, "js/[name].js"),
path: path.join(PATHS.dist, '/js/'),
publicPath: '/'
},
// watch settings
mode: NODE_ENV,
devtool: NODE_ENV == "development" ? "eval" : false,
devServer: {
contentBase: PATHS.dist,
port: 8080,
open: NODE_ENV == "development" ? true : false,
overlay: {
warnings: true,
errors: true
}
},
watchOptions: {
aggregateTimeout: 100
},
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: "/node_modules/",
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: "> 3%"
}
}]
]
}
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}, {
test: /\.scss$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"csscomb-loader",
"sass-loader"
]
}]
},
plugins: [
new HtmlWebpackPlugin({
// favicon: "dist/img/favicon.ico",
// minify: true,
hash: false,
template: 'src/index.html',
filename: "./index.html"
}),
new SvgStore({
svgoOptions: {
plugins: [{
removeTitle: true
}]
},
prefix: 'icon'
}),
new WebpackImagesResizer({
src: path.join(PATHS.src, '/img'),
dest: path.join(PATHS.dist, '/img')
}, {
width: "200%"
}),
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,
options: {
quality: 90
}
}],
overrideExtension: true,
detailedLogs: false,
strict: true
}),
new MiniCssExtractPlugin({
filename: path.join(PATHS.assets, "css/[name].css")
}),
new CopyWebpackPlugin([{
from: path.join(PATHS.src, '/img'),
to: path.join(PATHS.assets, "img")
}])
]
};
if (NODE_ENV == "production") {
module.exports.optimization.minimizer[
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
}
})
]
}