README

轻松将webpack入口点注入到twig模板中。

本仓库提供了一种Twig扩展，可以轻松将Webpack生成的文件与Twig模板引擎相结合。

这种方法允许动态插入由Webpack生成的带有hash值的CSS样式表和JS脚本。

与extract-text-webpack-plugin配合使用效果良好

安装

composer require fullpipe/twig-webpack-extension

设置Webpack

您需要安装webpack-manifest-plugin

npm install webpack-manifest-plugin --save

或者使用Yarn

yarn add webpack-manifest-plugin

配置webpack.config.js

// webpack.config.js

var ManifestPlugin = require('webpack-manifest-plugin');
const path = require("path");

module.exports = {
  ...
  entry: {
    vendor: ["jquery", "lodash"],
    main: './src/main.js'
  },
  output: {
    ...
    filename: "js/[name].js",
    path: path.resolve(__dirname, "../public/build"),
    publicPath: '/build/', // required
  },
  plugins: [
    new ManifestPlugin(),
    new ExtractTextPlugin({
      filename: "css/[name].css",
      publicPath: "/build/",
    }),
  ]
}

注册为Twig扩展

# app/config/services.yml

parameters:
    webpack.manifest: "%kernel.root_dir%/../public/build/manifest.json" #should be absolute
    webpack.public_dir: "%kernel.root_dir%/../public" #your public-dir

services:
    twig_extension.webpack:
        class: Fullpipe\TwigWebpackExtension\WebpackExtension
        public: false
        arguments:
            - "%webpack.manifest%"
            - "%webpack.public_dir%"
        tags:
            - { name: twig.extension }

将入口点注入到您的Twig中

{# app/Resources/views/base.html.twig #}

<head>
    ...
    {% webpack_entry_css 'main' %}
    {% webpack_entry_css 'inline' inline %}
</head>

<body>
    ...
    {% webpack_entry_js 'vendor' %}
    {% webpack_entry_js 'main' defer %}
    {% webpack_entry_js 'second' async %}
    {% webpack_entry_js 'inline' inline %}
</body>

示例

查看工作示例：example，以及webpack.config.js：webpack.config.js。

通过哈希输出文件避免浏览器缓存

如果您使用[hash]或[chunkhash]

// webpack.config.js
...
output: {
  ...
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js'
},
plugins: [
  new ExtractTextPlugin({
    ...
    filename: 'css/[name].[contenthash].css',
  }),
]

您应该在每次Webpack编译后清除twig缓存。
因此，对于开发环境，请不要使用[hash]或[chunkhash]。

fullpipe / twig-webpack-extension

维护者

详细信息

README

安装

设置Webpack

注册为Twig扩展

将入口点注入到您的Twig中

示例

通过哈希输出文件避免浏览器缓存