- 我想对JavaScript模块进行更改，并将这些更改实时打包到/dist/bundle.js中
- 只要在更改src模块时自动创建/dist/bundle.js，我的问题就可以解决（我可以刷新页面并反映我的更改）
- 我当前运行：每次更改后 npm run dev 并刷新url
- 或者有一个webpack-dev-server插件，允许我启动 wepack-dev-server --mode development ；但仍然可以通过/dist/bundle.js充分利用在localhost：5000上运行的flask应用程序
- 我正试图提高工作流程的速度，因此任何战术技巧都将有所帮助
。
树结构
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>
