starter/webpack.config.js at master · NaimNaimov/starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const { ProvidePlugin, WatchIgnorePlugin } = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

const isProduction = process.env.NODE_ENV === 'production';

console.log(ProvidePlugin);

const plugins = [
  new CleanWebpackPlugin(),
  new MiniCssExtractPlugin({
    filename: "[name].css",
  }),

  new ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];

if (!isProduction) {
  plugins.push(
    new BrowserSyncPlugin({
      host: 'nnaimov.int',
      proxy: 'http://nnaimov.int/starter/',
      port: 3000,
      open: 'local',
      files: [
          path.resolve('index.html'),
      ],
    }),

    new WebpackBuildNotifierPlugin({
      title: "My Project Webpack Build",
      logo: path.resolve("./src/images/favicon/favicon-32x32.png"),
      suppressSuccess: true
    })
  );
}

module.exports = {
  mode: isProduction ? 'production' : 'development',

  entry: {
    'bundle': './index.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve('./dist/'),
  },

  resolve: {
    extensions: ['.js', '.css', '.scss'],
    alias: {
      '@js': path.resolve('./src/js'),
      '@scss': path.resolve('./src/scss'),
    },
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },

      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                autoprefixer({}),
              ],
            },
          },
          'sass-loader',
        ],
      },

      /**
       * Handle fonts.
       */
      {
        test: /fonts[\\/].*\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
            },
          },
        ],
      },
    ],
  },

  plugins,

  devtool: isProduction ? false : 'source-map',
};