How do I natively add webpack to my Meteor 1.3 React app?

help
1

Hi, I am somewhat new to Webpack, Meteor and React (3 months in) but I have a pretty good understanding thus far. Anyways I cannot find out how to properly add webpack to my application. The main reason I want to figure this out is because I want to use react-s-alert and prolly other things as well. Since I am using Meteor 1.3 I don’t think it’s required to use the official webpack meteor package since NPM is now supported, but I could be wrong.

If anyone could help me, that would be great I have outlined my meteor packages, npm packages and my folder structure below. I know this is prolly asking a lot but I am seriously not getting what I need to do. A lot of information on internet about using both webpack & meteor points to outdated information or using the meteor package.

Thanks for your help, I love Meteor!

.meteor/packages
meteor-base mobile-experience mongo session jquery tracker standard-minifiers es5-shim ecmascript check random email accounts-base reactive-var reactive-dict ejson http browser-policy accounts-password meteortoys:allthings kadira:flow-router alanning:roles meteorhacks:aggregate tmeasday:publish-counts percolate:find-from-publication reywood:publish-composite fortawesome:fontawesome aldeed:collection2 aldeed:simple-schema semantic:ui flemay:less-autoprefixer static-html datariot:ganalytics react

Package.json
{ "name": "etl-meteor-react", "version": "0.0.1", "dependencies": { "async": "^1.5.2", "classnames": "^2.2.3", "history": "^2.0.0", "lodash": "^4.4.0", "moment": "^2.11.2", "react": "^0.14.7", "react-dom": "^0.14.7", "react-mixin": "^3.0.3" }, "devDependencies": { "babel-eslint": "^4.1.8", "csslint": "^0.10.0", "eslint-plugin-react": "^3.16.1", "eslinter": "^3.2.1", "webpack": "^1.12.13" } }

Project tree (hopefully I am doing this right) :smiley:
. ├── app │ ├── both │ │ ├── collections │ │ │ └── users.js │ │ └── routes │ │ ├── authenticated.jsx │ │ ├── common.jsx │ │ └── public.jsx │ ├── client │ │ ├── app.html │ │ ├── components │ │ │ ├── Account │ │ │ │ └── Account.jsx │ │ │ ├── Footer │ │ │ │ └── Footer.jsx │ │ │ ├── Header │ │ │ │ ├── Header.jsx │ │ │ │ ├── Header.less │ │ │ │ └── HeaderNavItem.jsx │ │ │ ├── Home │ │ │ │ ├── Home.jsx │ │ │ │ └── Home.less │ │ │ ├── Login │ │ │ │ ├── Login.jsx │ │ │ │ ├── Register.jsx │ │ │ │ └── Register.less │ │ │ ├── MainLayout.jsx │ │ │ ├── MainLayout.less │ │ │ ├── NotFound.jsx │ │ │ └── NotFound.less │ │ ├── helpers │ │ │ └── flow-router.js │ │ └── vendor │ │ └── semantic-ui │ └── server │ ├── methods │ ├── publications.js │ └── security.js ├── package.json ├── public │ ├── favicon.ico │ ├── images │ └── video └── settings ├── devel.json └── prod.json

2

There is no ‘official’ meteor webpack package. The webpack:webpack you referred to was a ingenious hack made by someone not affiliated with MDG because it allowed native npm support, bundling and hot reloading.

AFAIK, this currently does not support the beta versions of meteor 1.3 but the author has said somewhere he will support it when 1.3 is released.

In 1.3, there is npm support so you can just do 'npm i --save ’ and then proceed to require or import it into your project.

Lastly, I’m pretty sure you can’t use webpack with meteor 1.3.

3

Thanks for the information, I decided to go ahead without webpack and just use react components. For example with alerts, I choose react-notification.

I am curious thou, why can’t we use webpack with 1.3? Was there something added that removed the need for it?

4

This is from one of MDG’s core devs working on the 1.3 release on why they’re not incorporating webpack:

5

check out the podcast…

6

Uh actually the one above is out of date, you need to listen to this one:

Fast forward to about 53 minutes to hear about Webpack.

1 Like
7

And now Meteor has Webpack integration thanks to @benoitt’s awesome package. Use Webpack with Meteor simply by adding packages (meteor-webpack 1.0 is out!)