accessible-prototype/webpack.config.js at master · dnikub/accessible-prototype · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');

module.exports = {
  entry: { main:'./src/index.js' },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },

  devServer: {
    contentBase: './dist'
  },

  module: {
    rules: [

      // use babel for all js files
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['babel-preset-env']
          }
        }
      },

      // convert SASS to CSS, then minify and autoprefix
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // extract CSS into separate file
          "css-loader", // translates CSS into CommonJS
          "postcss-loader", // autoprefixes CSS
          { loader: "sass-loader", // compiles Sass to CSS, using Node Sass by default
            options: {
              importer: globImporter() // allows you to use glob syntax, eg. @import 'layout/*';
            }
          }
        ]
      },

      // include fonts in your build
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }]
      },

      // include images in your build
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          { loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          },

          {
            loader: 'image-webpack-loader',
            options: {
              // best image compression settings: https://gist.github.com/LoyEgor/e9dba0725b3ddbb8d1a68c91ca5452b5

              //png
              pngquant: {
                speed: 1,
                quality: 98,
              },
              zopfli: {
                more: true,
                iterations: 50 // very slow but more effective
              },
              //svg
              svgo: {
                plugins: [{
                  removeViewBox: false
                }]
              },
              //jpg lossless
              jpegtran: {
                progressive: true
              },
              mozjpeg: {
                quality: 80
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              gifsicle: {
                interlaced: false,
              }
            }
          }
        ]
      }
    ]
  },

  plugins: [

    // clean dist folder before each build
    new CleanWebpackPlugin(['dist']),

    // extract css into file
    new MiniCssExtractPlugin({
      filename: './style.[contenthash].css'
    }),

    // use index.html as a template
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })
  ],

  optimization: {
    minimizer: [
      // minify js
      new UglifyJSPlugin({
        cache: true,
        parallel: true
      })
    ]
  }

}