{"id":3961,"date":"2016-04-28T02:31:15","date_gmt":"2016-04-28T02:31:15","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3961"},"modified":"2016-04-28T02:31:15","modified_gmt":"2016-04-28T02:31:15","slug":"using-multiple-entry-points-webpack","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/using-multiple-entry-points-webpack\/","title":{"rendered":"Using multiple entry points in Webpack"},"content":{"rendered":"<p>If you&#8217;re looking to add multiple entry points in React, it&#8217;s likely you&#8217;re maintaining multiple pages or applications (this is the intent of the feature).<\/p>\n<p>To do this, you need to change the syntax you use in the &#8220;entry&#8221; part of the webpack.config a bit, as well as the filenames you make (output\/filename):<\/p>\n<pre lang=\"javascript\">\nvar path = require(\"path\");\nvar webpack = require(\"webpack\");\n\nmodule.exports = {   \n  entry: { \n    ssl_search: \".\/src\/ssl_search\/Entry.js\",\n    lecture_search: \".\/src\/lecture_search\/Entry.js\"\n  },\n  output: {\n    path: __dirname,\n    filename: \"public\/search\/[name].bundle.js\"\n  },\n  devtool: \"#source-map\",\n  plugins: [\n    new webpack.HotModuleReplacementPlugin()\n  ],\n  module: {\n    loaders: [\n      { test: \/\\.css$\/, loader: \"style-loader!css-loader\" },     \n      {\n        test: \/\\.jsx|\\.js$\/,\n        loaders: [\"babel\"],\n        include: path.join(__dirname, \"src\")\n      }\n    ]\n  }\n};\n<\/pre>\n<p>Then, to use these, you need to change the filenames you import in your HTML pages, to reference each entry point directly:<\/p>\n<pre lang=\"html\">\n<script type=\"text\/javascript\" src=\"\/public\/search\/lecture_search.bundle.js\"><\/script>\n<\/pre>\n<p>When I set this up, I make a simple Entry.js file that is a stub into each application (each page is similar, but with different configuration). For instance, for one application, this is what it looks like:<\/p>\n<pre lang=\"javascript\">\n\"use strict\";\n\nlet start = require(\"..\/SearchClient.js\").start;\nlet App = require(\".\/SSLSearchApp.jsx\").App;\n\nstart(App);\n<\/pre>\n<p>The App page is the React component that renders the page. The &#8220;start&#8221; function looks like the below. Note this is specific to my application, and needs to work both server and client side, if you&#8217;re doing server side rendering (I&#8217;m using feature detection to swap methods). The &#8220;object.assign&#8221; bit gets you around a V8 defect that surfaces in React 15.<\/p>\n<pre lang=\"javascript\">\n\"use strict\";\n\ndelete Object.assign;\nObject.assign = require(\"object.assign\").shim();\n\nlet searchEvents = require(\".\/SearchEvents.js\");\nlet ReactDOM = require(\"react-dom\");\nlet React = require(\"react\");\n\nfunction start(App) {\n  if (!!window.initialUrl) {\n    searchEvents.initialRender(\n      window.initialUrl,\n      (searchResults) => {\n        let AppWrapper = React.createClass({\n          render: function () {\n            return (\n              <App \n                server={false}\n                routeParams={window.routeParams} \n                searchResults={searchResults} \/>);\n          }\n        });\n\n        let domNode = document.getElementById(\"container\");\n\n        ReactDOM.render(\n          React.createElement(AppWrapper),\n          domNode\n        );\n      }    \n    );    \n  } else {\n    render();\n  }\n}\n\nexports.start = start;\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>How to set up multiple entry points (applications \/ pages) with Webpack<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[302,455,592],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3961"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3961"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}