mirror of https://github.com/apache/superset.git
Configure webpack-dev-server (#5786)
* 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
This commit is contained in:
parent
d43813ff09
commit
eb41756e5e
|
@ -261,23 +261,52 @@ To parse and generate bundled files for superset, run either of the
|
|||
following commands. The `dev` flag will keep the npm script running and
|
||||
re-run it upon any changes within the assets directory.
|
||||
|
||||
```
|
||||
```bash
|
||||
# Copies a conf file from the frontend to the backend
|
||||
npm run sync-backend
|
||||
|
||||
# Compiles the production / optimized js & css
|
||||
npm run prod
|
||||
|
||||
# Start a watcher that rebundle your assets as you modify them
|
||||
npm run dev
|
||||
|
||||
# Start a web server that manages and updates your assets as you modify them
|
||||
npm run dev
|
||||
npm run dev-server
|
||||
```
|
||||
|
||||
For every development session you will have to start a flask dev server
|
||||
as well as an npm watcher
|
||||
For every development session you will have to
|
||||
|
||||
```
|
||||
1. Start a flask dev server
|
||||
|
||||
```bash
|
||||
superset runserver -d
|
||||
# or specify port
|
||||
superset runserver -d -p 8081
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. Start webpack dev server
|
||||
|
||||
```bash
|
||||
npm run dev-server
|
||||
```
|
||||
|
||||
This will start `webpack-dev-server` at port 9000 and you can access Superset at localhost:9000.
|
||||
By default, `webpack-dev-server` is 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
|
||||
`supersetPort` to `webpack-dev-server`
|
||||
|
||||
```bash
|
||||
npm run dev-server -- --supersetPort=8081
|
||||
```
|
||||
|
||||
You can also specify port for `webpack-dev-server`
|
||||
|
||||
```bash
|
||||
npm run dev-server -- --port=9001
|
||||
# or with both dev-server port and superset port
|
||||
npm run dev-server -- --port=9001 --supersetPort=8081
|
||||
```
|
||||
|
||||
#### Upgrading npm packages
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
"test:one": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js",
|
||||
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles 'spec/**/*_spec.*'",
|
||||
"dev": "webpack --mode=development --colors --progress --debug --watch",
|
||||
"dev-server": "webpack-dev-server --mode=development --progress",
|
||||
"prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
|
||||
"build": "webpack --mode=production --colors --progress",
|
||||
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
|
||||
|
@ -155,6 +156,7 @@
|
|||
"less": "^2.6.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.0",
|
||||
"minimist": "^1.2.0",
|
||||
"mocha": "^3.5.3",
|
||||
"npm-check-updates": "^2.14.0",
|
||||
"po2json": "^0.4.5",
|
||||
|
@ -170,6 +172,7 @@
|
|||
"webpack": "^4.17.1",
|
||||
"webpack-assets-manifest": "^3.0.1",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.7",
|
||||
"webpack-sources": "^1.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,15 +1,68 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const WebpackAssetsManifest = require('webpack-assets-manifest');
|
||||
// Parse command-line arguments
|
||||
const parsedArgs = require('minimist')(process.argv.slice(2));
|
||||
|
||||
// input dir
|
||||
const APP_DIR = path.resolve(__dirname, './');
|
||||
|
||||
// output dir
|
||||
const BUILD_DIR = path.resolve(__dirname, './dist');
|
||||
|
||||
const isDevMode = process.env.NODE_ENV !== 'production';
|
||||
const {
|
||||
mode = 'development',
|
||||
devserverPort = 9000,
|
||||
supersetPort = 8088,
|
||||
} = parsedArgs;
|
||||
|
||||
const isDevMode = mode !== 'production';
|
||||
|
||||
const plugins = [
|
||||
// creates a manifest.json mapping of name to hashed output used in template files
|
||||
new WebpackAssetsManifest({
|
||||
publicPath: true,
|
||||
// This enables us to include all relevant files for an entry
|
||||
entrypoints: true,
|
||||
// Also write to disk when using devServer
|
||||
// instead of only keeping manifest.json in memory
|
||||
// This is required to make devServer work with flask.
|
||||
writeToDisk: isDevMode,
|
||||
}),
|
||||
|
||||
// create fresh dist/ upon build
|
||||
new CleanWebpackPlugin(['dist']),
|
||||
];
|
||||
|
||||
if (isDevMode) {
|
||||
// Enable hot module replacement
|
||||
plugins.push(new webpack.HotModuleReplacementPlugin());
|
||||
// text loading (webpack 4+)
|
||||
plugins.push(new MiniCssExtractPlugin({
|
||||
filename: '[name].[hash:8].entry.css',
|
||||
chunkFilename: '[name].[hash:8].chunk.css',
|
||||
}));
|
||||
} else {
|
||||
// text loading (webpack 4+)
|
||||
plugins.push(new MiniCssExtractPlugin({
|
||||
filename: '[name].[chunkhash].entry.css',
|
||||
chunkFilename: '[name].[chunkhash].chunk.css',
|
||||
}));
|
||||
}
|
||||
|
||||
const output = {
|
||||
path: BUILD_DIR,
|
||||
publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
|
||||
};
|
||||
|
||||
if (isDevMode) {
|
||||
output.filename = '[name].[hash:8].entry.js';
|
||||
output.chunkFilename = '[name].[hash:8].chunk.js';
|
||||
} else {
|
||||
output.filename = '[name].[chunkhash].entry.js';
|
||||
output.chunkFilename = '[name].[chunkhash].chunk.js';
|
||||
}
|
||||
|
||||
const config = {
|
||||
node: {
|
||||
|
@ -25,12 +78,7 @@ const config = {
|
|||
welcome: ['babel-polyfill', APP_DIR + '/src/welcome/index.jsx'],
|
||||
profile: ['babel-polyfill', APP_DIR + '/src/profile/index.jsx'],
|
||||
},
|
||||
output: {
|
||||
path: BUILD_DIR,
|
||||
publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
|
||||
filename: '[name].[chunkhash].entry.js',
|
||||
chunkFilename: '[name].[chunkhash].chunk.js',
|
||||
},
|
||||
output,
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
|
@ -57,13 +105,16 @@ const config = {
|
|||
{
|
||||
test: /\.css$/,
|
||||
include: APP_DIR,
|
||||
use: [isDevMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
include: APP_DIR,
|
||||
use: [
|
||||
isDevMode ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'less-loader',
|
||||
],
|
||||
|
@ -97,22 +148,25 @@ const config = {
|
|||
'react/lib/ExecutionEnvironment': true,
|
||||
'react/lib/ReactContext': true,
|
||||
},
|
||||
plugins: [
|
||||
// creates a manifest.json mapping of name to hashed output used in template files
|
||||
new WebpackAssetsManifest({
|
||||
publicPath: true,
|
||||
entrypoints: true, // this enables us to include all relevant files for an entry
|
||||
}),
|
||||
|
||||
// create fresh dist/ upon build
|
||||
new CleanWebpackPlugin(['dist']),
|
||||
|
||||
// text loading (webpack 4+)
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[chunkhash].entry.css',
|
||||
chunkFilename: '[name].[chunkhash].chunk.css',
|
||||
}),
|
||||
],
|
||||
plugins,
|
||||
devtool: isDevMode ? 'cheap-module-eval-source-map' : false,
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
hot: true,
|
||||
index: '', // This line is needed to enable root proxying
|
||||
inline: true,
|
||||
stats: { colors: true },
|
||||
overlay: true,
|
||||
port: devserverPort,
|
||||
// Only serves bundled files from webpack-dev-server
|
||||
// and proxy everything else to Superset backend
|
||||
proxy: {
|
||||
context: () => true,
|
||||
'/': `http://localhost:${supersetPort}`,
|
||||
target: `http://localhost:${supersetPort}`,
|
||||
},
|
||||
contentBase: path.join(process.cwd(), '../static/assets/dist'),
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue