Javascript Webpack:生成index.html以与Django一起使用_Javascript_Django_Angular_Webpack

Javascript Webpack:生成index.html以与Django一起使用

javascript django angular webpack

Javascript Webpack:生成index.html以与Django一起使用,javascript,django,angular,webpack,Javascript,Django,Angular,Webpack,我有一个Angular 4/Django应用程序，Django应用程序中的所有Angular代码。angular应用程序是使用webpack构建的我希望webpack将.js包输出到“static”文件夹中，并将“index.html”文件输出到“templates”文件夹中。注入的标记也需要更新，以使用Django的“静态文件”表示法： {% load static %} <script type="text/javascript" src="{% static 'dist/poly

我有一个Angular 4/Django应用程序，Django应用程序中的所有Angular代码。angular应用程序是使用webpack构建的

我希望webpack将.js包输出到“static”文件夹中，并将“index.html”文件输出到“templates”文件夹中。注入的

标记也需要更新，以使用Django的“静态文件”表示法：

{% load static %}

<script type="text/javascript" src="{% static 'dist/polyfills.js' %}"></script>

注意：我知道我可以很容易地复制/移动index.html，但是我需要这些标记来使用Django的静态文件

请澄清。这是Django提供的当前“templates/index.html”文件。这样做很好。如果可能的话，我想让网页包生成这个文件，因为我想在dis文件的命名中使用[hash]，并在这里自动更新。因此，我将拥有

app.[hash].js

，

vendor.[hash].js

，

polyfill.[hash].js

，当我的angular应用程序由webpack构建时，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>

{%load static%}
应用程序
加载。。。

网页包使用生成模板。我发现了一个变通方法（感觉很粗糙，这当然是额外的一层工作），它使用webpack.config.js和django模板

请注意，Angular2/4/5/which不允许您访问其网页配置。使用

ng eject

（请参阅）将其提取。下面的

webpack.config.js

是经过修改的摘录

免责声明我只在Webpack+Django项目中使用过这个。更改Angular2的默认网页包配置似乎是一个巨大的兔子洞。我建议避免这种情况，并使用+Angular2将后端与前端完全分离。但我想每个人都有自己的想法；以下是我的解决方案：

//webpack.config.js
// ...
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；//应该已经在这里了，
//但它是这篇摘录的主角
module.exports={
// ...
“条目”：{
“main”：[“/src/main.ts”]，
“polyfills”：[“/src/polyfills.ts”]，
“样式”：[“/src/assets/css/styles.css”]
},
“产出”：{
“path”：path.join（process.cwd（），“dist”），
“文件名”：“[name].bundle.js”，
“chunkFilename”：“[id].chunk.js”，
“publicPath”：“/”//这是一个错误的方法。index.html应该是一个由Django呈现然后由Angular使用的模板。是的，我理解，这就是我目前的实现方式。我想要完成的是webpack为Django生成模板文件，以便我可以生成具有[hash]的捆绑包在名称中，django知道文件名。谢谢，最后我想出了如何防止插件在任何地方插入JS。如果您仍然能做到这一点，我还有几个问题：1）为什么命令python manage.py collectstatic--clear
？这似乎很危险，而且不确定它是否有用。2）有没有办法让also webpack dev server将html内容实时提供给Django，或者提供刚刚构建的插件？（哈哈，你的昵称，意大利语听起来很有趣）@GiampaoloFerradini，我很确定，collectstatic--clear用于清除上一个webpack捆绑包中的webpack输出。webpack每次都使用一个唯一的散列，因此每次运行时文件都会累积起来。
    {% 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>

# 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>