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

Question

我有一个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

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

为了澄清。 这是我目前由Django提供的“templates / index.html”文件。 这样可以正常工作。 如果可能的话，我想让webpack生成这个文件，因为我想在dis文件的命名中使用[hash]并在这里自动更新。 所以我会有app.[hash].js ， vendor.[hash].js ， polyfill.[hash].js和Django模板会在我的角度应用程序由webpack构建时更新。

模板/ 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>

Answer 1

Webpack使用html-webpack-plugin生成模板。 我找到了一个解决方法（它感觉很乱，而且肯定是一个额外的工作层），它使用webpack.config.js和django模板。

请注意，Angular2 / 4/5 /不会让您访问其webpack配置。 使用ng eject （请参阅此答案）将其解压缩。 下面的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'文件夹）。

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

问题描述

1 个解决方案

解决方案1
1 2018-02-02 17:23:16

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

问题描述

1 个解决方案

解决方案1 1 2018-02-02 17:23:16

解决方案1
1 2018-02-02 17:23:16