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

我有一个Angular 4/Django应用程序，它是Django应用程序中的所有角码。角度的应用程序是使用webpack构建的。Webpack：生成index.html以便与Django一起使用

我想webpack将.js包输出到“静态”文件夹中，将“index.html”文件输出到“模板”文件夹中。被注射的<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>

来源

2017-10-05 Codewise

这是错误的方式。 index.html应该是由Django呈现然后由Angular使用的模板。 –

是的，我明白，目前我正在执行。我想要完成的是为webpack生成Django的模板文件，以便我可以生成名称中包含[hash]的包，并且django知道文件名。 – Codewise

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

您必须运行Django的python manage.py collectstatic --clear每次的WebPack生成后（以清理'静态'文件夹）。

来源

2018-02-02 17:23:16 djangulo

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

回答

相关问题