编辑“︁Django与Webpack集成”︁（章节）

= Django与Webpack集成 =

== 简介 ==  
'''Django''' 是一个强大的Python Web框架，而 '''Webpack''' 是现代前端开发的模块打包工具。将两者集成可以高效管理静态资源（如JavaScript、CSS、图片等），实现前端代码的模块化、压缩和实时更新。本指南将详细介绍如何在Django项目中集成Webpack，适合初学者和需要优化前端工作流的开发者。

== 为什么需要集成Webpack？ ==  
* '''模块化开发'''：Webpack支持ES6模块化语法，便于组织代码。  
* '''资源优化'''：自动压缩、代码拆分、Tree Shaking等功能提升性能。  
* '''开发效率'''：热模块替换（HMR）实现实时预览。  
* '''兼容性'''：通过Babel等工具转换现代语法以适应旧浏览器。  

== 集成步骤 ==  

=== 1. 初始化项目结构 ===  
假设Django项目结构如下：  
<pre>  
myproject/  
├── manage.py  
├── myapp/  
│   ├── views.py  
│   └── ...  
├── static/          # 存放Webpack生成的静态文件  
└── frontend/        # 前端源码目录  
    ├── src/  
    │   ├── index.js  
    │   └── styles.css  
    └── package.json  
</pre>  

=== 2. 配置Webpack ===  
安装Webpack及相关插件：  
<syntaxhighlight lang="bash">  
npm init -y  
npm install webpack webpack-cli webpack-bundle-tracker babel-loader @babel/core @babel/preset-env --save-dev  
</syntaxhighlight>  

创建 '''webpack.config.js'''：  
<syntaxhighlight lang="javascript">  
const path = require('path');  
const BundleTracker = require('webpack-bundle-tracker');  

module.exports = {  
  entry: './frontend/src/index.js',  
  output: {  
    path: path.resolve(__dirname, '../static/dist'),  
    filename: 'bundle.js',  
  },  
  plugins: [  
    new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),  
  ],  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        use: { loader: 'babel-loader' },  
      },  
    ],  
  },  
};  
</syntaxhighlight>  

=== 3. 配置Django使用Webpack输出 ===  
修改Django的 '''settings.py'''：  
<syntaxhighlight lang="python">  
STATICFILES_DIRS = [  
    os.path.join(BASE_DIR, 'static'),  
]  

WEBPACK_LOADER = {  
    'DEFAULT': {  
        'BUNDLE_DIR_NAME': 'dist/',  
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),  
    }  
}  
</syntaxhighlight>  

安装Django的Webpack加载器：  
<syntaxhighlight lang="bash">  
pip install django-webpack-loader  
</syntaxhighlight>  

在模板中加载打包后的文件：  
<syntaxhighlight lang="html">  
{% load render_bundle from webpack_loader %}  
<!DOCTYPE html>  
<html>  
<head>  
    {% render_bundle 'main' 'css' %}  
</head>  
<body>  
    <script src="{% static 'dist/bundle.js' %}"></script>  
</body>  
</html>  
</syntaxhighlight>  

=== 4. 开发与生产环境配置 ===  
使用不同Webpack配置区分环境：  
* 开发模式：启用HMR和Source Maps。  
* 生产模式：压缩代码并移除调试信息。  

示例配置片段：  
<syntaxhighlight lang="javascript">  
module.exports = (env) => {  
  const isProduction = env.production;  
  return {  
    mode: isProduction ? 'production' : 'development',  
    devtool: isProduction ? false : 'source-map',  
  };  
};  
</syntaxhighlight>  

== 实际案例 ==  
=== 场景：构建一个React应用 ===  
1. 安装React依赖：  
<syntaxhighlight lang="bash">  
npm install react react-dom @babel/preset-react  
</syntaxhighlight>  

2. 更新Babel配置（.babelrc）：  
<syntaxhighlight lang="json">  
{  
  "presets": ["@babel/preset-env", "@babel/preset-react"]  
}  
</syntaxhighlight>  

3. 在Django视图中渲染React组件：  
<syntaxhighlight lang="python">  
from django.shortcuts import render  

def home(request):  
    return render(request, 'home.html')  
</syntaxhighlight>  

== 常见问题 ==  
'''Q: Webpack打包后Django找不到静态文件？'''  
*A: 确保<code>STATICFILES_DIRS</code>包含输出目录，并运行<code>python manage.py collectstatic</code>。*  

'''Q: 如何调试Webpack与Django的集成问题？'''  
*A: 检查<code>webpack-stats.json</code>是否生成，路径是否匹配。*  

== 总结 ==  
通过集成Webpack，Django项目可以享受现代前端工具链的高效开发体验。关键步骤包括：  
# 配置Webpack打包入口和输出。  
# 使用<code>django-webpack-loader</code>动态加载资源。  
# 区分开发与生产环境配置。  

<mermaid>  
graph LR  
  A[前端代码] --> B(Webpack打包)  
  B --> C{静态文件}  
  C --> D[Django模板加载]  
  D --> E[用户浏览器]  
</mermaid>  

下一步建议学习：  
* 使用Django REST Framework构建API。  
* 优化Webpack性能（如代码分割）。

[[Category:后端框架]]
[[Category:Django]]
[[Category:Django与前端集成]]