mesto

1
const path = require('path');
2
const HtmlWebpackPlugin = require('html-webpack-plugin');
3
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5

6
module.exports = {
7
  entry: { main: './src/pages/index.js' },
8
  output: {
9
    path: path.resolve(__dirname, 'dist'),
10
    filename: 'main.js',
11
    publicPath: '',
12
  },
13
  mode: 'development',
14
  devServer: {
15
    static: path.resolve(__dirname, './dist'),
16
    compress: true,
17
    port: 8080,
18
    open: true,
19
  },
20
  module: {
21
    rules: [
22
      {
23
        test: /\.js$/,
24
        use: 'babel-loader',
25
        exclude: /node_modules/,
26
      },
27
      {
28
        test: /\.(png|svg|jpg|jpeg|gif)$/,
29
        type: 'asset/resource',
30
        generator: {
31
          filename: 'images/[name].[hash][ext]',
32
        },
33
      },
34
      {
35
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
36
        type: 'asset/resource',
37
        generator: {
38
          filename: 'fonts/[name].[hash][ext]',
39
        },
40
      },
41
      {
42
        test: /\.css$/,
43
        use: [
44
          MiniCssExtractPlugin.loader,
45
          {
46
            loader: 'css-loader',
47
            options: { importLoaders: 1 },
48
          },
49
          'postcss-loader',
50
        ],
51
      },
52
    ],
53
  },
54
  plugins: [
55
    new HtmlWebpackPlugin({
56
      template: './src/index.html',
57
    }),
58
    new CleanWebpackPlugin(),
59
    new MiniCssExtractPlugin(),
60
  ],
61
};
62