diff --git a/src/actions/growler.action.js b/src/actions/growler.action.js
index a03731c..6dadc8d 100644
--- a/src/actions/growler.action.js
+++ b/src/actions/growler.action.js
@@ -1,4 +1,4 @@
-import {GROWLER__HIDE, GROWLER__HIDED, GROWLER__SHOW} from './types/growler.types';
+import {GROWLER__HIDE, GROWLER__HIDDEN, GROWLER__SHOW} from './types/growler.types';
 let hideTimeOut;
 let hiddenTimeOut;
 /*
@@ -11,7 +11,7 @@ export function hideGrowler() {
     clearTimeout(hideTimeOut);
     hiddenTimeOut = window.setTimeout(() =>{
       dispatch({
-        type: GROWLER__HIDED,
+        type: GROWLER__HIDDEN,
       });
     }, 500);
   };
@@ -32,7 +32,7 @@ export function hideTimeOutGrowler(growler, time) {
 }
 
 export function showGrowler(text, type) {
-  return { 
+  return {
     type: GROWLER__SHOW,
     growler:{
       text,
@@ -43,7 +43,7 @@ export function showGrowler(text, type) {
 
 
 export function showGrowlerSuccess(text) {
-  return { 
+  return {
     type: GROWLER__SHOW,
     growler:{
       text,
@@ -53,7 +53,7 @@ export function showGrowlerSuccess(text) {
 }
 
 export function showGrowlerError(text) {
-  return { 
+  return {
     type: GROWLER__SHOW,
     growler:{
       text,
diff --git a/src/actions/types/growler.types.js b/src/actions/types/growler.types.js
index 6336965..dd4921d 100644
--- a/src/actions/types/growler.types.js
+++ b/src/actions/types/growler.types.js
@@ -4,4 +4,4 @@
 
 export const GROWLER__SHOW = 'GROWLER__SHOW';
 export const GROWLER__HIDE = 'GROWLER__HIDE';
-export const GROWLER__HIDED = 'GROWLER__HIDED';
+export const GROWLER__HIDDEN = 'GROWLER__HIDDEN';
diff --git a/src/component/growler.jsx b/src/component/growler.jsx
index 7b7598a..9098c95 100644
--- a/src/component/growler.jsx
+++ b/src/component/growler.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import 'style!./growler.scss';
+import 'style-loader!./growler.scss';
 import classNames from 'classnames/bind';
 import errors from 'classnames/bind';
 
diff --git a/src/reducer/growler.reducer.js b/src/reducer/growler.reducer.js
index 640842c..766ef3f 100644
--- a/src/reducer/growler.reducer.js
+++ b/src/reducer/growler.reducer.js
@@ -1,4 +1,4 @@
-import {GROWLER__HIDE, GROWLER__HIDED, GROWLER__SHOW} from '../actions/types/growler.types';
+import {GROWLER__HIDE, GROWLER__HIDDEN, GROWLER__SHOW} from '../actions/types/growler.types';
 
 const initialState = {
   text: '',
@@ -23,7 +23,7 @@ export default function growlerReducer(state = initialState, action) {
       status: 'hide',
     };
 
-  case GROWLER__HIDED:
+  case GROWLER__HIDDEN:
     return {
       ...state,
       ...action.growler,
diff --git a/webpack.config.js b/webpack.config.js
index ee14dd9..b7ace82 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,10 +5,15 @@ module.exports = {
         filename: "es5/index.js"
     },
     module: {
-        loaders: [
-            { test: /\.css$/, loader: "style!css" },
-            { test: /\.js$/, loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'] },
-            { test: /\.jsx$/, loaders:['react-hot', 'babel?stage=0&loose[]=es6.modules'] }
+        rules: [{
+            test: /\.css$/,
+            use: [{
+                'loader': 'style-loader'
+            }, {
+                'loader': 'css'
+            }] },
+            { test: /\.js$/, use: ['react-hot-loader', 'babel-loader?stage=0&loose[]=es6.modules'] },
+            { test: /\.jsx$/, use:['react-hot-loader', 'babel-loader?stage=0&loose[]=es6.modules'] }
         ]
     }
 };
\ No newline at end of file