Comments (1)
Maybe someone from the future will needs this. So here we are.
Not exactly sure if this is optimal, but it seems to be working.
Define multiple entry points.
entry: {
app: './src/app.js',
pageHome: './src/components/home/Home.js',
pageSetting: './src/components/setting/Setting.js'
}
Define the common chunk plugin to look at your end points.
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js', [
'app',
'pageHome',
'pageSetting'
], 2)
]
Utilize react-router
and react-router-proxy-loader
… (Not sure if this works with bundle-loader
alone).
https://github.com/rackt/react-router/blob/0.13.x/docs/guides/overview.md
https://github.com/odysseyscience/react-router-proxy-loader
<Route path="/" handler={App}>
<DefaultRoute handler={require('react-router-proxy!./components/home/Home.js')}></DefaultRoute>
<Route name="home" handler={require('react-router-proxy!./components/home/Home.js')}></Route>
<Route name="setting" path="settings" handler={require('react-router-proxy!./components/setting/Setting.js')}></Route>
</Route>
Success?
- Pages will be loaded with only the dependencies they require.
- Any common related code will be extracted and placed into
common.js
. - Seems to work with
react-hot
,babel-loader
,file-loader
,style-loader
, etc.
from webpack-howto.
Related Issues (20)
- How to inject bundled script to existing html? HOT 1
- How to use cors with webpack? HOT 1
- Connecting the frontend with the backend
- How to use webpack async loading with Ionic 2 application ? HOT 1
- Worth adding requirement of having webpack installed?
- Error in main.js when running: Module build failed: ReferenceError: [BABEL] HOT 2
- Capitalisation significance?
- webpack.optimize.CommonsChunkPlugin optimizes common stylesheets to an unexpected file name HOT 1
- Feature flags for different entry points
- Multiple entrypoints: what about components? HOT 1
- Running webpack --watch on old React project gives me the following error
- npm start introduce error
- CSS files: Is there a difference between require() and import?
- webpack command fails with below error. HOT 2
- Add more on language/framework specific configs
- Update to webpack 2 HOT 1
- include css and js files into HTML HOT 1
- webpack inject production js files after all included js files.
- A line of Chinese translation is incorrect HOT 1
- Module build failed: ReferenceError: [BABEL] webpack-howto/example/modules/main.js: Unknown option: direct.presets
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-howto.