webpack.config.js

   1 const path = require('path');
   2 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   3 const HtmlWebpackPlugin = require('html-webpack-plugin');
   4 const postcssPresetEnv = require('postcss-preset-env');
   5 const postcssGridKiss = require('postcss-grid-kiss');
   6 const autoprefixer = require('autoprefixer');
   7
   8 const cssDir = path.resolve(__dirname, 'css');
   9 const outDir = path.resolve(cssDir, 'dist');
  10
  11 module.exports = (env, argv) => ({
  12     mode: argv.mode,
  13     devtool: argv.mode === 'production' ? 'source-map' : 'inline-source-map',
  14     devServer: {
  15         host: '0.0.0.0', // so we can export it from docker
  16         contentBase: outDir,
  17     },
  18     plugins: [
  19         new MiniCssExtractPlugin(),
  20         new HtmlWebpackPlugin({
  21             template: path.resolve(cssDir, 'index.html'),
  22         }),
  23     ],
  24     entry: {
  25         css: path.resolve(cssDir, 'index.js'),
  26     },
  27     output: {
  28         filename: '[name].js',
  29         path: outDir,
  30     },
  31     module: {
  32         rules: [
  33             {
  34                 test: /\.(scss|css)$/i,
  35                 use: [
  36                     MiniCssExtractPlugin.loader,
  37                     'css-loader',
  38                     //'style-loader',
  39                     'sass-loader',
  40                     { loader: 'postcss-loader', options: { plugins: () => [
  41                         postcssGridKiss({fallback: false}),
  42                         autoprefixer({grid: "no-autoplace"}),
  43                         postcssPresetEnv(),
  44                     ] } },
  45                 ],
  46             },
  47         ],
  48     },
  49     stats: {
  50         warningsFilter: [
  51             'IE does not support justify-content on grid containers',
  52             /IE does not support justify-content on grid containers/,
  53             (warning) => !/IE does not support justify-content on grid containers/.test(warning),
  54         ],
  55     }
  56 });