const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
const htmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/src/public/index.html',
inject: 'body',
scriptLoading: 'defer',
});
const miniCssExtractConfig = new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
});
module.exports = {
entry: __dirname + '/src/index.js',
output: {
// path: __dirname + '/dist',
path: __dirname,
filename: '[name].[hash].js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader', 'eslint-loader'],
exclude: [/node_modules/],
},
{
test: /\.(sass|scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
exportGlobals: true,
localIdentName: '[local]--[hash:base64:5]',
},
},
},
{
loader: 'sass-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
autoprefixer({
browsers: ['> 0%'],
}),
],
],
},
sourceMap: true,
},
},
],
},
],
},
resolve: {
alias: {
components: path.join(__dirname, 'src/components'),
constants: path.join(__dirname, 'src/constants'),
helpers: path.join(__dirname, 'src/helpers'),
store: path.join(__dirname, 'src/store'),
pages: path.join(__dirname, 'src/pages'),
utils: path.join(__dirname, 'src/utils'),
styles: path.join(__dirname, 'src/styles'),
api: path.join(__dirname, 'src/api'),
},
extensions: ['.js', '.jsx'],
},
plugins: [htmlWebpackPluginConfig, miniCssExtractConfig],
devServer: {
contentBase: './src/public',
port: 10888,
},
};