。
树结构
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>
webpack --watch
对我有用吗?但是,我的输入模块以及所有打包的导入模块都很大。
每当我进行较小的更改时,使用--watch都会非常不可靠。因此,在我主观上进行了重大更改之后,手动运行“ npm run web”