title: Compile CSS and JS in difference files / WEBPACK
body: <p>For 2 days I have been trying to compile the js and css file to a separate file because now everything is together. Does anyone have any idea how this can be solved?
  I would be very grateful for your help.</p>
  <p>There is my code webpack.config.js</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  
  module.exports = {
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'src/dist'),
          filename: 'bundle.js'
      },
      module: {
          rules: [
              {
                  test: /\.m?js$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env']
                      }
                  }
              },
              {
                  test: /\.scss$/,
                  use: [
                      &quot;style-loader&quot;, // creates style nodes from JS strings
                      {
                          loader: &quot;css-loader&quot;,
                          options: {
                              url: false
                          }
                      },
                      &quot;sass-loader&quot; // compiles Sass to CSS, using Node Sass by default
                  ]
              },
          ]
      },
      plugins: [
          new BrowserSyncPlugin({
          // browse to http://localhost:3000/ during development,
          // ./public directory is being served
              host: 'localhost',
              port: 3000,
              files: ['./src/*.html'],
              server: { baseDir: ['src'] }
          }),
      
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery'
       })
   
      ]
  };
  </code></pre>