Use url-loader

templates/common/Gruntfile.js

@@ -13,7 +13,7 @@ module.exports = function (grunt) {
 
   // Read configuration from package.json
   var pkgConfig = grunt.file.readJSON('package.json');
-  
+
   grunt.initConfig({
     pkg: pkgConfig,
 
@@ -29,10 +29,10 @@ module.exports = function (grunt) {
       options: {
         port: 8000,
         webpack: webpackDevConfig,
-        publicPath: '/scripts/',
+        publicPath: '/assets/',
         contentBase: './<%= pkg.src %>/',
       },
-      
+
       start: {
         keepAlive: true,
       }

templates/common/index.html

@@ -14,6 +14,6 @@
   <div id="content">
     <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
   </div>
-  <script type="text/javascript" src="scripts/main.js"></script>
+  <script type="text/javascript" src="assets/main.js"></script>
 </body>
 </html>

templates/common/root/webpack.config.js

@@ -9,7 +9,8 @@
 
 module.exports = {
   output: {
-    filename: 'main.js'
+    filename: 'main.js',
+    publicPath: '/assets/'
   },
 
   cache: true,

templates/common/root/webpack.dist.config.js

@@ -10,8 +10,8 @@ var webpack = require('webpack');
 
 module.exports = {
   output: {
-    publicPatch: 'dist/',
+    publicPath: '/assets/',
-    path: 'dist/scripts/',
+    path: 'dist/assets/',
     filename: 'main.js'
   },
 

templates/javascript/App.jsx

@@ -14,7 +14,7 @@ var ReactTransitionGroup = React.addons.TransitionGroup;
 require('../../styles/reset.css');
 require('../../styles/main.css');
 
-var imageURL = '../../images/yeoman.png';
+var imageURL = require('../../images/yeoman.png');
 
 var <%= scriptAppName %> = React.createClass({
   render: function() {