title: Webpack 4 production setup with sass and babel
body: <p>So I want to setup a production build script for my app.</p>
  
  <p>My folder structure is this:</p>
  
  <pre><code>public
    - index.html
    - images
        - some_image.png
  build
    - bundle.js
    - bundle.map.js
  src
    - index.jsx (Entrypoint)
    - js
        - JSX files
    - scss
        - app.scss (imports others)
        - modules, base, ...
  </code></pre>
  
  <p>My current webpack config allows me to launch a dev server with --content-base set to public. This is the config:</p>
  
  <pre><code>const path = require("path");
  
  const SRC_DIR = path.resolve(__dirname, 'src');
  const BUILD_DIR = path.resolve(__dirname, 'build');
  
  module.exports = {
      entry: './src/index.jsx',
      output: {
          path: BUILD_DIR,
          filename: 'bundle.js',
          publicPath: "/",
      },
      devtool: "sourcemap",
      module: {
          rules: [
              {
                  test: /\.jsx$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              },
              {
                  test: /\.s?css$/,
                  use: [{
                      loader: "style-loader"
                  }, {
                      loader: "css-loader", options: {
                          sourceMap: true
                      }
                  }, {
                      loader: "sass-loader", options: {
                          sourceMap: true
                      }
                  }]
              }
          ]
      },
      resolve: {
          extensions: ['.js', '.jsx'],
      }
  };
  </code></pre>
  
  <p>What I would like to achieve is now a webpack build that bundles all my assets in the build folder so I can gzip it and deploy it. Maybe something like this:</p>
  
  <pre><code>build
    - index.html
    - bundle.js
    - bundle.css
    - images
  </code></pre>
  
  <p>With this setup I could just deploy this and point nginx to the folder and the app would be ready to go. 
  I can't figure out how to achieve this though. Currently all webpack -p does it put a bundle.js in my build folder. I've read about "extract-text-webpack-plugin" but it wouldn't work for me throwing errors (maybe because webpack 4 is not supported?)</p>
  
  <p>Currently webpack is really confusing because most tutorials are for webpack 2 or maybe even 1 and I can't find a good guide for a simple clean config. I don't want to install another 10 npm packages for this to work...</p>