{"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":"

If you’re looking to add multiple entry points in React, it’s likely you’re maintaining multiple pages or applications (this is the intent of the feature).<\/p>\n

To do this, you need to change the syntax you use in the “entry” part of the webpack.config a bit, as well as the filenames you make (output\/filename):<\/p>\n

\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
Then, to use these, you need to change the filenames you import in your HTML pages, to reference each entry point directly:<\/p>\n
\n