安装 Django-webpack-loader

2 年 ago
雅, 悟
2 minutes

Django-webpack-loader 中文的翻译为：Django-Webpack-加载器。

    • django: 2.2

 

    • webpack: 4.30.0

 

    django-webpack-loader: 0.6.0

当需要在Django中使用webpack时，推荐使用django-webpack-loader。

GitHub – owais/django-webpack-loader：透明地将webpack与django结合使用

之前已经写过关于django-webpack-loader的文章。
– 使用Django + Webpack来运行Vue
– 使用webpack在Django中使用bootstrap4

这次用最新信息简洁地说一下。

安装

创建一个名为“PROJECTNAME”的项目文件夹，并移动到该文件夹内。然后执行npm init。

mkdir PROJECT_NAME
cd PROJECT_NAME
npm init -y

使用npm安装所需的模块。

npm install --save-dev webpack webpack-cli webpack-bundle-tracker

webpack-bundle-tracker会将webpack的捆绑信息输出到名为webpack-stats.json的文件中。django-webpack-loader使用这个webpack-stats.json。

GitHub – owais/webpack-bundle-tracker: 将有关webpack编译过程的一些统计数据输出到文件中

创建webpack配置文件webpack.config.js

touch webpack.config.js

编辑。

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  mode: 'development',

  context: __dirname,

  entry: {
      main: './assets/js/main.js' // エントリ名とエントリポイント
  },

  output: {
      path: path.resolve('./assets/webpack_bundles/'), // 出力
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
}

如上所述，将输入文件夹设置为/assets/js/，将输出文件夹设置为/assets/webpack_bundles/。请提前创建相应的文件夹。

mkdir -p assets/js
mkdir assets/webpack_bundles

安装django-webpack-loader。

如果还没有安装Django的话

pip install django

创建Django项目，取名为「djangoproject」。

django-admin.py startproject djangoproject

pip install django-webpack-loader

...

INSTALLED_APPS = (
 ...
 'webpack_loader',
)

...

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, '../assets'), 
)

...

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, '../webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
    }
}

用法示例：Vue.js

我要尝试使用Vue。

npm install --save-dev vue

创建入口点

touch assets/js/main.js

编辑。

window.Vue = require('vue');

在写上述时需要加载仅运行时构建。

Vue不是一个构造函数

在webpack.config.js中进行补充。

module.exports = { 
  ...
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  ...
}

编译。

./node_modules/.bin/webpack --config webpack.config.js

在assets/bundles文件夹中创建了一个捆绑文件。

试着在Django中调用捆绑包。假设创建一个名为Vue的应用程序。

mkdir -p djangoproject/vue/templates/vue
touch djangoproject/vue/templates/vue/index.html

INSTALLED_APPS = (
 ...
 'vue',
)

...
from django.views.generic.base import TemplateView
...

urlpatterns = [
    ...
    path('', TemplateView.as_view(template_name='vue/index.html')),
    ...
]

你好，Vue！

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>

  <body>
    {% verbatim %}
    <div id="app">
      {{ message }}
    </div>
    {% endverbatim %}

    {% render_bundle 'main' %}
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

render_bundle是用来加载模板所需的script和link。为了防止{{ message }}被django渲染，进行了verbatim操作。

python djangoproject/manage.py runserver

请用浏览器打开 http://127.0.0.1:8000/。

bannerAds