Configure webpack-dev-server #5786
Conversation
Codecov Report
@@ Coverage Diff @@
## master #5786 +/- ##
=======================================
Coverage 63.75% 63.75%
=======================================
Files 364 364
Lines 23106 23106
Branches 2579 2579
=======================================
Hits 14731 14731
Misses 8360 8360
Partials 15 15Continue to review full report at Codecov.
|
superset/assets/webpack.config.js
Outdated
| @@ -11,6 +14,54 @@ const BUILD_DIR = path.resolve(__dirname, './dist'); | |||
|
|
|||
| const isDevMode = process.env.NODE_ENV !== 'production'; | |||
There was a problem hiding this comment.
one comment here is that I may have broken this flag when moving to webpack 4 which introduced the concept of mode=production/development (I was trying to use redux dev tools recently and it wasn't working locally, so I thought of this). I thought that also set a NODE_ENV (because webpack 4 was supposed to be all about smart defaults) but it seems like that might not be true.
So I think we either need to
- reference the mode variable (ie
argv.mode === 'production')
OR - explicitly define the
NODE_ENVin our npm webpack scripts (NODE_ENV=production webpack ...)
I can fix this in a separate PR as well if you prefer because it might have implications for the other logic in this file that relies on isDevMode (which I think is always true right now)
|
This is going to be so great! Thanks for adding this! 🚀🚀🚀 |
|
@williaster Somehow using In my previous projects I use |
superset/assets/webpack.config.js
Outdated
| @@ -147,6 +147,7 @@ const config = { | |||
| 'react/lib/ReactContext': true, | |||
| }, | |||
| plugins, | |||
| devtool: isDevMode ? 'cheap-module-eval-source-map' : false, | |||
* setup devserver with correct proxy * dev server wroking with written manifest * add comments * Change webpack to default port 9000 and minor js formatting * Use hash in development. * write to disk = true * Take ports as argument for dev-server * update instructions * update instructions * add devtools * use mode instead of NODE_ENV * use minicssextract for prod (like before) * remove empty line
* setup devserver with correct proxy * dev server wroking with written manifest * add comments * Change webpack to default port 9000 and minor js formatting * Use hash in development. * write to disk = true * Take ports as argument for dev-server * update instructions * update instructions * add devtools * use mode instead of NODE_ENV * use minicssextract for prod (like before) * remove empty line (cherry picked from commit eb41756)
* setup devserver with correct proxy * dev server wroking with written manifest * add comments * Change webpack to default port 9000 and minor js formatting * Use hash in development. * write to disk = true * Take ports as argument for dev-server * update instructions * update instructions * add devtools * use mode instead of NODE_ENV * use minicssextract for prod (like before) * remove empty line
mistercrunch
added
🏷️ bot
Goodbye, reload button! Instead of running
npm run dev,will start webpack dev server that wrap flask server at
localhost:9000and reload the page automatically (plus hot module replacement) when you change the js code and save.Basically, you will go to http://localhost:9000 instead of http://localhost:8088 and after that, watch your browser refresh right after saving a file.
Advanced configuration
By default,
webpack-dev-serveris configured for flask running at port 8088.If you start flask server at another port (e.g. 8081), you have to pass an extra argument
supersetPorttowebpack-dev-serverYou can also specify port for
webpack-dev-servernpm run dev-server -- --port=9001 # or with both dev-server port and superset port npm run dev-server -- --port=9001 --supersetPort=8081This will start dev server at port 9001 instead
p.s. Hot Module Replacement does not fully work with React yet. It will reload the entire page instead of reloading only part of the page. This needs
react-hot-loader, which I can work on that in a follow-up PR.@williaster @graceguo-supercat @hughhhh @conglei @xtinec