Vamos configurar um ambiente de projeto, como se fosse ume esqueleto, com webpack e webpack-dev-server com auto refresh para melhor desenvolvimento.

Primeiro vamos ao terminal para instalar o webpack e o webpack-dev-server de maneira global

sudo npm install -g webpack webpack-dev-server

Agora navegamos até a pasta do nosso novo projeto e rodamos o “npm init” para iniciar o projeto e depois, abrimos o arquivo package.json e adicionamos as seguintes dependências

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1"
  },

logo depois de adicionarmos essas dependências (que incluem aí o babel e alguns loaders do webpack) nós rodamos no terminal o npm update para baixar as dependências necessárias.

Nesse passo configuramos o webpack.config.js com o source-map, que irá permitir que possamos debugar nosso projeto, com o plugin de auto refresh, com os loaders de babel, url e file loader, css, style e sass loader, além do devServer, que será o servidor de desenvolvimento que irá nos ajudar com o auto compile a auto refresh 🙂 .. mas de maneira simples, é só copiar esse código abaixo

webpack = require('webpack');

module.exports =  {
	devtool: 'source-map',
	entry: './src/js/main.js',
	output: {
		path: __dirname + '/dist',
		filename: 'app.bundle.js',
		publicPath: '/dist/'
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				loader:'babel-loader',
				query: {
					presets: ['es2015']
				}
			},
			{
				test: /\.(woff|woff2|ttf|svg|eot)$/,
				loader: 'url-loader?limit=100000',
			},
			{
				test: /\.(scss|sass)$/,
				loader: ['style-loader', 'css-loader', 'sass-loader'],
			}
		]
	},
	devServer: {
		// host: '0.0.0.0',
		inline: true,
		watchOptions: {
			poll: true,
			aggregateTimeout: 300
		}
	}
}

prontinho… dessa maneira a gente já tem um pré ambiente de desenvolvimento javascript, com webpack, common.js, debug e auto refresh