安装Webpack Bundle Tracker
webpack-bundle-tracker是一个Webpack插件,可生成一个统计文件,该文件包含有关由Webpack生成的前端应用程序资产的元数据信息。
我们将首先安装webpack-bundle-tracker模块,然后更新Webpack配置文件以使用此插件。
npm install webpack-bundle-tracker --save
从Angular 6 CLI弹出Webpack
接下来,您需要使用以下命令从Angular 6 CLI弹出Webpack配置:
ng eject
打开webpack.config.js
并从webpack-bundle-tracker
导入BundleTracker,然后找到plugins
条目并添加以下代码
var BundleTracker = require('webpack-bundle-tracker');
/*...*/
module.exports = {
/*...*/
plugins:[
/*...*/
new BundleTracker({filename: '../webpack-stats.json'})
]
}
下一步添加publicPath
设置
"output": {
"path": path.join(process.cwd(),"dist"),
"filename":"[name].bundle.js",
"chunkFilename":"[id].chunk.js",
"crossOriginLoading": false,
"publicPath":"http://127.0.0.1:4200/"//1
},
"devServer": {
"historyApiFallback": true,
"publicPath":"http://127.0.0.1:4200/",//2
}
如果您为应用程序提供服务,则您的父文件夹中将有一个../webpack-stats.json
从Angular 6 CLI中弹出Webpack配置后,您将无法使用ng serve,而必须使用npm run start服务您的应用程序。
接下来,安装django-webpack-loader
包,它负责读取webpack-stats.json
,并在Django模板中插入资产。
回到终端运行以下命令:
pip install django-webpack-loader
在settings.py
文件中,将webpack_loader
添加到已安装的应用程序列表中:
INSTALLED_APPS = [
#...
'webpack_loader',
'core'
]
然后添加此配置对象:
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
为Angular 6应用程序提供服务
现在,创建视图来为Angular 6应用程序提供服务,打开core/views
,并添加以下视图函数:
from django.shortcuts import render
def home(request):
return render(request, 'core/home.html')
接下来,你需要创建home.html
模板,因此在核心应用程序内部创建一个templates/core
文件夹,然后添加一个包含以下内容的home.html
:
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>A Simple CRM with Django and Angular 6</title>
</head>
<body>
<app-root></app-root>
{% render_bundle 'inline' %}
{% render_bundle 'polyfills' %}
{% render_bundle 'styles' %}
{% render_bundle 'vendor' %}
{% render_bundle 'main' %}
</body>
</html>
现在你需要在urls.py
中添加主页的URL:
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from core import views as coreviews
urlpatterns =[
url(r'^$',coreviews.home),
path('admin/', admin.site.urls)
]
您现在应该可以访问Django Web应用程序。
修复热代码重新加载
如果更改前端应用程序的源代码,则在从http://127.0.0.1:8000
导航应用程序时,不会在不手动刷新页面的情况下重新加载更新热代码,这意味着HCR无法正常工作,因此只需打开webpack.config.js
,并添加以下设置:
"devServer": {
"historyApiFallback": true,
"publicPath":"http://127.0.0.1:4200/",//2,
"headers": {
'Access-Control-Allow-Origin': '*'//3
}
}
这是因为http://localhost:8000将请求发送到Webpack开发服务器(http://localhost:4200)以获取源代码更改,因此我们需要更新标头以允许来自所有来源的请求。
结论
在本教程中,我们已经集成了Angular 6前端和Django REST API后端。