我是 webpack 的新手,但非常想掌握这项技术。我通过 python 脚本运行 Flask 应用程序__init__.py
并在 cmd 中运行 webpack 来开发我的 Web 应用程序npm run start
。
完成一些开发后,我执行npm run build
并将整个文件夹推.build
送到 Ubuntu 服务器。
我的项目具有以下结构:
├── api.log
├── app.py
├── assets
│ ├── images
│ ├── scripts
│ └── styles
├── build
│ ├── manifest.json
│ └── public
├── db.log
├── flask_webpack_test.iml
├── __init__.py
├── node_modules
│ == bunch of them here
├── package.json
├── package-lock.json
├── __pycache__
│ ├── api.cpython-35.pyc
│ ├── app.cpython-35.pyc
│ ├── config.cpython-35.pyc
│ ├── db_connection.cpython-35.pyc
│ ├── __init__.cpython-35.pyc
│ └── our_logging.cpython-35.pyc
├── templates
│ └── index.jinja2
├── tests
│ ├── conftest.py
│ ├── __init__.py
│ └── test_views.py
├── webpack.config.js
└── wsgi.py
但是当我访问我的域名时,它只显示纯 html,没有任何静态内容。在网络浏览器控制台中,我看到Unchecked runtime.lastError: The message port closed before a response was received.
我复制了测试项目这里
因此,连接通过端口 2992 中止。在我的 Ubuntu 服务器上,我打开了它。
我的清单.json
{"assets":"images/dog/noidea.jpg":"images/dog/noidea.b9252d5fd8f39ce3523d303144338d7b.jp,
"app_css.css":"app_css.6e0ed0322fcd44592461.css",
"app_js.js":"app_js.3919e91e57e850f7cebe.js"},
"publicPath":"http://localhost/assets/"}
webpack.config.js:
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var rootAssetPath = './assets';
module.exports = {
entry: {
app_js: [
rootAssetPath + '/scripts/entry.js'
],
app_css: [
rootAssetPath + '/styles/main.css'
]
},
output: {
path: './build/public',
publicPath: 'http://localhost/assets/',
filename: '[name].[chunkhash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.css']
},
module: {
loaders: [
{
test: /\.js$/i, loader: 'script-loader',
exclude: /node_modules/
},
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
loaders: [
'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]',
'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin('[name].[chunkhash].css'),
new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
rootAssetPath: rootAssetPath,
ignorePaths: ['/styles', '/scripts']
})
]
};
python 文件给出了 html:
from flask import Flask, render_template
from werkzeug.serving import run_simple
from flask_webpack import Webpack
webpack = Webpack()
def create_app(settings_override=None):
"""
Create a test application.
:param settings_override: Override settings
:type settings_override: dict
:return: Flask app
"""
app = Flask(__name__)
params = {
'DEBUG': False,
'WEBPACK_MANIFEST_PATH': './build/manifest.json'
}
app.config.update(params)
# if settings_override:
# app.config.update(settings_override)
webpack.init_app(app)
return app
app = create_app()
@app.route('/')
def index():
return render_template('index.jinja2')
# @app.route('/s')
# def index():
# return render_template('index.jinja2')
if __name__ == '__main__':
app.run(port=5000)
# run_simple('localhost', 5000, app, use_reloader=True, use_debugger=True)
任何人都可以帮忙解决这个问题吗?我的设置有什么问题以及为什么我无法在我的服务器上运行 webpack?
编辑一个
ivan@194-58-97-122:~$ sudo netstat -ntlp | grep LISTEN
tcp 0 0 194.58.97.122:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 127.0.0.2:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 127.0.0.1:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 326/sshd
tcp 0 0 127.0.0.1:953 0.0.0.0:* LISTEN 303/named
tcp 0 0 0.0.0.0:1500 0.0.0.0:* LISTEN 355/ihttpd
tcp 0 0 0.0.0.0:27017 0.0.0.0:* LISTEN 302/mongod
tcp6 0 0 :::80 :::* LISTEN 385/apache2
tcp6 0 0 :::53 :::* LISTEN 303/named
tcp6 0 0 :::22 :::* LISTEN 326/sshd
tcp6 0 0 ::1:953 :::* LISTEN 303/named
tcp6 0 0 :::443 :::* LISTEN 385/apache2
tcp6 0 0 :::3306 :::* LISTEN 335/mysqld
以及防火墙设置:
ivan@194-58-97-122:~$ sudo ufw status verbose
Status: active
Logging: on (low)
Default: deny (incoming), allow (outgoing), deny (routed)
New profiles: skip
To Action From
-- ------ ----
3306 ALLOW IN Anywhere
2992 ALLOW IN Anywhere
2992/tcp ALLOW IN Anywhere
1191/tcp ALLOW IN Anywhere
22 ALLOW IN Anywhere
22/tcp ALLOW IN Anywhere
3306 (v6) ALLOW IN Anywhere (v6)
2992 (v6) ALLOW IN Anywhere (v6)
2992/tcp (v6) ALLOW IN Anywhere (v6)
1191/tcp (v6) ALLOW IN Anywhere (v6)
22 (v6) ALLOW IN Anywhere (v6)
22/tcp (v6) ALLOW IN Anywhere (v6)