/*
Welcome to the Webpack configuration file! The react_rails_webpack gem uses the hjs-webpack npm package to configure webpack. Any options available in hjs-webpack are available here. hjs-webpack repo: https://github.com/HenrikJoreteg/hjs-webpack hjs-webpack tutorial (for an outdated version, but concepts are relatively unchanged): http://learn.humanjavascript.com/react-ampersand/setting-up-webpack
*/
require('webpack') var getConfig = require('hjs-webpack') // This setup is largely based on the hjs-webpack npm package var environment = require('./environment.json')
// I disable most of the UglifyJS minification by default // so that if any weird errors happen on the Rails side // it is still possible to track them down in the // compiled code. Rails will uglify assets on its own. var uglifyOpts = {
compress: false, mangle: false, beautify: { semicolons: false }, sourceMap: false, output: { comments: true }
}
var config = getConfig({
in: 'src/app.js', // Tells webpack to look in the src/app.js file to find the code for components and rendering out: '../app/assets/webpack', // Tells webpack to put compiled files into ../app/assets/webpack when it runs clearBeforeBuild: true, // Tells webpack to destroy and remake pre-existing OUT folder before compiling files to it uglify: uglifyOpts, // Disables most of Uglify html: function (data) { var sourceFileNote = "<aside class='source'>Find the source for this page in client/webpack.config.js</aside>" // The divs below will get detected by React because they have the "react-component-target" class // If you want to test a new component, you'll have to edit one of these accordingly or // add another div with the "react-component-target" class and pass it the appropriate // component name and props in the "data-componentname" and "data-componentprops" attributes // just like the ones below. var plainReactComponent = "<div class=\"react-component-target\" data-componentname=\"Hello\" data-componentprops='{ \"details\": \"My initial greeting was set with getInitialState in the client/src/components/Hello.jsx file.\" }'></div>" var reduxComponent = "<div class=\"react-component-target\" data-componentname=\"HelloWithRedux\" data-componentprops='{ \"details\": \"My initial greeting was set with initialState in the client/src/redux/reducer.js file.\" }'></div>" return { 'index.html': data.defaultTemplate( { // Other options you could pass include 'title' and 'head': // title: 'Site Title' // head: '<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>', html: (sourceFileNote + plainReactComponent + reduxComponent) } ) } }, // environment.hostname is set in your environment.json file // It should be set to your computer's name on your network // On a Mac, to see your computer's name on your network, // go to System Preferences, and then the "Sharing" menu, // and you should see it in the "Computer Name" input field hostname: environment.hostname
})
module.exports = config