Create webpack.common.config.js

webpack/webpack.common.config.js

@@ -0,0 +1,35 @@
+// Common webpack configuration used by webpack.hot.config and webpack.rails.config.
+
+var path = require("path");
+
+module.exports = {
+ devtool: "eval-source-map",
+ context: __dirname, // the project dir
+ entry: [
+ "./assets/javascripts/example"
+ ],
+ // In case you wanted to load jQuery from the CDN, this is how you would do it:
+ // externals: {
+ // jquery: "var jQuery"
+ // },
+ resolve: {
+ root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
+ path.join(__dirname, "assets/stylesheets") ],
+ extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
+ },
+ module: {
+ loaders: [
+ { test: require.resolve("react"), loader: "expose?React" },
+ { test: /\.jsx$/, loaders: ["react-hot", "es6", "jsx?harmony"] },
+ { test: /\.css$/, loader: "style-loader!css-loader" },
+ { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+
+ // the url-loader uses DataUrls.
+ // the file-loader emits files.
+ { test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
+ { test: /\.ttf$/, loader: "file-loader" },
+ { test: /\.eot$/, loader: "file-loader" },
+ { test: /\.svg$/, loader: "file-loader" }
+ ]
+ }
+};

webpack/webpack.hot.config.js

@@ -1,5 +1,6 @@
 var webpack = require("webpack");
 var path = require("path");
+
 module.exports = {
  devtool: "eval-source-map",
 
@@ -18,10 +19,6 @@ module.exports = {
  plugins: [
  new webpack.HotModuleReplacementPlugin()
  ],
- // In case you wanted to load jQuery from the CDN, this is how you would do it:
- // externals: {
- // jquery: "var jQuery"
- // },
  resolve: {
  root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
  path.join(__dirname, "assets/stylesheets") ],

webpack/webpack.rails.config.js

@@ -22,7 +22,7 @@ module.exports = {
  filename: railsBundleFile,
  path: railsJsAssetsDir
  },
- // Let's load jQuery from the CDN or rails asset pipeline
+ // Load jQuery from the CDN or rails asset pipeline
  externals: {
  jquery: "var jQuery"
  },
@@ -34,20 +34,28 @@ module.exports = {
  loaders: [
  // **IMPORTANT** This is needed so that each bootstrap js file required by
  // bootstrap-sass-loader has access to the jQuery object
- { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
- { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+ { test: /bootstrap-sass\/assets\/javascripts\//,
+ loader: 'imports?jQuery=jquery' },
+ { test: /\.scss$/,
+ loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+
  // Load Bootstrap's CSS
  // Needed for the css-loader when [bootstrap-sass-loader]
- { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
- { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
- { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
- { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" },
+ { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
+ loader: "url?limit=10000&minetype=application/font-woff" },
+ { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+ loader: "url?limit=10000&minetype=application/octet-stream" },
+ { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+ loader: "file" },
+ { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+ loader: "url?limit=10000&minetype=image/svg+xml" },
  //{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
  //{ test: /\.ttf$/, loader: "file-loader" },
  //{ test: /\.eot$/, loader: "file-loader" },
  //{ test: /\.svg$/, loader: "file-loader" },
 
  { test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
+
  // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
  // in the Rails Asset Pipeline. Thus, load this one prior.
  { test: require.resolve("jquery"), loader: "expose?jQuery" },