我有一个Angular 4 / Django应用程序，Django应用程序中的所有角度代码。角度应用程序使用webpack构建。
我希望webpack将.js包输出到“static”文件夹，将“index.html”文件输出到“templates”文件夹中。注入的<script></script>标签也需要更新才能使用Django的“静态文件”表示法：
{% load static %}
<script type="text/javascript" src="{% static 'dist/polyfills.js' %}"></script>
这是我的目录结构（为简洁起见省略了一些文件），其中project是持有Django项目的顶级文件。
project
+ angular
+ app (angular application root)
+ config
+ node_modules
+ src
- webpack.config.js
+ static
+ dist ( webpack output folder)
- app.[hash].js
- vendor.[hash].js
- polyfills.[hash.js
- index.html
+ templates
- index.html
为了澄清。这是我目前由Django提供的“templates / index.html”文件。这样可以正常工作。如果可能的话，我想让webpack生成这个文件，因为我想在dis文件的命名中使用[hash]并在这里自动更新。因此，当我的网络应用程序由webpack构建时，我会更新app.[hash].js，vendor.[hash].js，polyfill.[hash].js和Django模板。
模板/ index.html的
{% load static %}
<html>
<head>
<base href="/">
<title>App</title>
<link href="{% static 'dist/app.css' %}" rel="stylesheet">
</head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="{% static 'dist/polyfills.js' %}"></script>
<script type="text/javascript" src="{% static 'dist/vendor.js' %}"></script>
<script type="text/javascript" src="{% static 'dist/app.js' %}"></script>
</body>
</html>
Webpack使用html-webpack-plugin生成模板。我找到了一个解决方法（它感觉很乱，而且肯定是一个额外的工作层），它使用webpack.config.js和django模板。
请注意，Angular2 / 4/5 /不会让您访问其webpack配置。使用ng eject（参见this answer）来提取它。下面的webpack.config.js是一个经过修改的摘录。
免责声明我只使用过Webpack + Django项目。更改Angular2的默认Webpack配置似乎是一个巨大的兔子洞。我建议避免这种情况并使用Django Rest Framework + Angular2将后端与前端完全分开。但我认为每个人都自己;以下是我的解决方案：
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin'); // should already be here,
// but it's the main player of this excerpt
module.exports = {
// ...
"entry": {
"main": ["./src/main.ts"],
"polyfills": ["./src/polyfills.ts"],
"styles": ["./src/assets/css/styles.css"]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js",
"publicPath": '/' // <- this is new
},
// ...
"plugins": [
// ...
new HtmlWebpackPlugin({
"template": "./templates/index.html", // <- path to your template
"filename": "./path/of/output/file.html", // <- output html file
// default is './index.html'
"inject": false // <- this allows you to place the static files
// where you want them
// ...
然后
# my_project.settings.py
# ...
# assuming your angular and django projects share the same base dir
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'src'), # <- this is webpack's output dir
)
然后在你的模板中
<!-- templates/index.html -->
{% load static %}
<html>
<head>
<base href="/">
<title>App</title>
<link href="{% static 'dist/app.css' %}" rel="stylesheet">
</head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.polyfills.entry' %}"></script>
<script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.vendor.entry' %}"></script>
<script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.app.entry' %}"></script>
</body>
</html>
你必须在每个webpack构建之后运行django的python manage.py collectstatic --clear（为了清理'static'文件夹）。