使用 Flask App 热重载 VanilaJS 或在每次 src 更改时创建 bundle.js

Question

我想对 JavaScript 模块进行更改，并将这些更改实时打包到 /dist/bundle.js 中
只要在更改 src 模块时自动创建这个 /dist/bundle.js，我的问题就解决了（我可以刷新页面并反映我的更改）
我目前运行: npm 运行 dev 每次更改后刷新 url
或者有一个 webpack-dev-server 的插件可以让我开始 wepack-dev-server --mode development;但仍然利用 Flask 应用程序运行ning on localhost:5000 with /dist/bundle.js
我正在努力提高我的工作流程速度，因此任何战术技巧都会有所帮助

.

树结构

    static
        ├───data
        │   └───@es#_ohlc_15min.json
        ├───dist
        │   └───bundle.js   (created by webpack)
        └───src
            ├───index.js
            ├───img
            ├───models
            └───views
    template
        └───index.html

    app.py  (flask app with routes)

package.json

{
  "name": "tradingview_charts",
  "main": "static/src/index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "jquery": "^3.4.1",
    "lightweight-charts": "^1.1.0",
    "react": "^16.12.0"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
    entry: ['./static/src/index.js'],

    output: {
        path: path.resolve(__dirname, 'static'),
        filename: 'dist/bundle.js'
    },
    devServer: {
        contentBase: './static',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['babel-loader']
            }
        ]
    }
};

.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tradingview Lightweight Charts</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}?{{ nowts }}">
</head>
<body>
    <div class="chart chart__candlestick" id="main_candlestick"></div>
    <script src="{{ url_for('static', filename='dist/bundle.js') }}?{{ nowts }}"></script>
</body>
</html>

Answer 1

webpack --watch

对我有用。

但是我的入口模块，所有打包的导入模块都相当大。

每当我进行微小的更改时，使用 --watch 变得相当不可靠。结果，在我主观上进行了重大更改后手动运行 "npm run web"

使用 Flask App 热重载 VanilaJS 或在每次 src 更改时创建 bundle.js

Hot Reload VanilaJS with Flask App or create bundle.js on every src change

javascript

flask

npm

webpack

webpack-dev-server