progress on webpacking css

[wfpl-cms.git] / webpack.config.js

diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644 (file)
index 0000000..192db4a
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,56 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
+const postcssGridKiss = require('postcss-grid-kiss');
+const autoprefixer = require('autoprefixer');
+
+const cssDir = path.resolve(__dirname, 'css');
+const outDir = path.resolve(cssDir, 'dist');
+
+module.exports = (env, argv) => ({
+    mode: argv.mode,
+    devtool: argv.mode === 'production' ? 'source-map' : 'inline-source-map',
+    devServer: {
+        host: '0.0.0.0', // so we can export it from docker
+        contentBase: outDir,
+    },
+    plugins: [
+        new MiniCssExtractPlugin(),
+        new HtmlWebpackPlugin({
+            template: path.resolve(cssDir, 'index.html'),
+        }),
+    ],
+    entry: {
+        css: path.resolve(cssDir, 'index.js'),
+    },
+    output: {
+        filename: '[name].js',
+        path: outDir,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(scss|css)$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    //'style-loader',
+                    'sass-loader',
+                    { loader: 'postcss-loader', options: { plugins: () => [
+                        postcssGridKiss({fallback: false}),
+                        autoprefixer({grid: "no-autoplace"}),
+                        postcssPresetEnv(),
+                    ] } },
+                ],
+            },
+        ],
+    },
+    stats: {
+        warningsFilter: [
+            'IE does not support justify-content on grid containers',
+            /IE does not support justify-content on grid containers/,
+            (warning) => !/IE does not support justify-content on grid containers/.test(warning),
+        ],
+    }
+});