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