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)
. ├── 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