webpack.config.jsconst path = require('path');
const webpack = require('webpack');
const argv = require('yargs').argv;
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const isDevelopment = argv.mode === 'development';
const isProduction = !isDevelopment;
const distPath = path.join(__dirname, '/dist');
const config = {
entry: {
main: './src/js/index.js'
},
output: {
filename: 'bundle.js',
path: distPath
},
module: {
rules: [{
test: /\.html$/,
use: 'html-loader'
}, {
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}]
}, {
test: /\.scss$/,
exclude: /node_modules/,
use: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
isProduction ? require('cssnano') : () => {},
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
},
'sass-loader'
]
}, {
test: /\.(gif|png|jpe?g|)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[path]/[name][hash].[ext]'
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70
}
}
},
],
}, {
test: /\.(eot|ttf|otf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name][hash].[ext]'
}
},
},{
test: /\.svg$/,
loader: 'svg-sprite-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
...glob.sync('./src/*.html')
.map(html => new HtmlWebpackPlugin({
filename: path.basename(html),
template: html
})),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
}),
new SpriteLoaderPlugin(),
],
optimization: isProduction ? {
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
compress: {
inline: false,
drop_console: true
},
},
}),
],
} : {},
devServer: {
contentBase: distPath,
port: 9000,
compress: true,
open: true,
hot: isDevelopment ? true : false
}
};
module.exports = config;
file.jsimport 'path/to/file'
html<div class="portfolio__site-link-img" style="background-image: url('path/to/file');"></div>