const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd
const filename = ext => isDev ? `bundle.[hash].${ext}` : `bundle.${ext}`
const jsLoaders = () => {
const loaders = [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
]
if (isDev) {
//loaders.push('eslint-loader')
}
return loaders
}
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: ['@babel/polyfill', './js/index.js'],
output: {
filename: filename('js'),
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.js'],
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
devtool: isDev ? 'source-map' : false,
devServer: {
port: 3000,
hot: isDev
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: 'index.html',
minify: {
removeComments: isProd,
collapseWhitespace: isProd
}
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/img'),
to: path.resolve(__dirname, 'dist/img')
},
],
}),
new MiniCssExtractPlugin({
filename: filename('css')
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true
}
},
'css-loader',
'sass-loader'
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: jsLoaders()
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|ico|woff|woff2)$/, // <=== match if you have required extension listed here or add it
use: {
loader: 'url-loader',
},
}
],
}
}