add full support for webpack + css

webpack.config.js

@@ -1,26 +1,36 @@
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
-    maxAssetSize: 512000
+    maxAssetSize: 512000,
   },
   devtool: 'cheap-module-source-map',
   entry: {
     'SEQTA': './src/SEQTA.js',
     'background': './src/background.js',
+    'inject-documentload': './src/inject/documentload.css', // Entry for CSS
+    'inject-iframe': './src/inject/iframe.css',            // Entry for CSS
+    'inject-injected': './src/inject/injected.css',        // Entry for CSS
   },
   output: {
-    filename: '[name].js',
+    filename: (pathData) => {
+      const name = pathData.chunk.name.replace('inject-', '');
+      return name.includes('inject') ? `inject/${name}.js` : `${name}.js`;
+    },
     path: path.resolve(__dirname, 'build'),
   },
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
         include: path.resolve(__dirname, 'src'),
       },
       {
@@ -33,10 +43,16 @@ module.exports = {
     ],
   },
   plugins: [
+    new MiniCssExtractPlugin({
+      filename: (pathData) => {
+        const name = pathData.chunk.name.replace('inject-', '');
+        return name.includes('inject') ? `inject/${name}.css` : `inject/${name}.css`;
+      },
+    }),
     new CopyWebpackPlugin({
       patterns: [
-        { from: 'public', to: '.' }, // Copies everything from the public folder to the root level of build
-        { from: 'src/inject', to: 'inject' },
+        { from: 'public', to: '.' },
+        { from: 'src/inject/preview', to: 'inject/preview' },
       ],
     }),
   ],