Webpack: how to set it up right?

Question

Sass

Please help me set up the webpack config correctly. It needs to do livereload, jade->html, sass->css.
Now the config looks like this:

const path = require('path');    
const webpack = require('webpack');    

module.exports = {
               entry: './src/index.js',
               output: {
                   filename: 'main.js',
                   path: path.resolve(__dirname, 'dist'),
                   publicPath: '/',
                   sourceMapFilename: '[name].map'
               },
               devtool: "source-map",
               devServer: {
                   hot: true, // Tell the dev-server we're using HMR
                   contentBase: path.resolve(__dirname, 'dist'),
                   publicPath: '/'
               },
               module: {
                   loaders: [
                       {
                           test: /\.css$/,
                           loader: "style-loader!css-loader"
                       }, {
                           test: /\.sass$/,
                           loaders: ['style-loader', 'css-loader', 'sass-loader']
                       }
                   ]
               }    
};

using commands:

• webpack-dev-server --watch-poll
  
• webpack-dev-server
  
• --watch webpack-dev-server
  

livereload works, but sass doesn't build
sass builds only when

• webpack
  

I include sass in index.js via require ('./style.sass');
How to make a config?

Answer 1

There isn't too much info, but I'm going to hazard a guess that the problem is in `publicPath`. Please clarify
what exactly does "sass doesn't build" mean?
1) webpack-dev-server gives some error in the terminal and stops working?
2) works fine, but just doesn't silently build sass?
3) does it pull the old version of your sass files that were bundled before by the webpack team?
If the behavior fits #2 or #3, then most likely `webpack-dev-server` is building your code but doesn't know how to send it to the browser. It stores the folded code in RAM so old copies stay in the file system - that's why the browser always pulls in old files
Usually such problems arise if something is wrong with the output fields `publicPath` and `path`. Try to "play around" with them by adding, for example, `/assets`, and check in the browser what kind of static it is trying to request and at what URL.
If it doesn’t help, you can always run these two commands at the same time, it should work:

webpack --watch
webpack-dev-server

You can run each of these commands in a separate terminal tab, or you can install the concurrently node module and then just write like this:
--kill-others is needed so that if one of the processes falls, the second one would also fall - in this case it will be convenient