simperfit/twig-webpack-extension
Composer 安装命令：
composer require simperfit/twig-webpack-extension
包简介
Inject your webpack entry points into twig templates with easy.
关键字：
README 文档
README
Inject your webpack entry points into twig templates with easy.
This repo provides a Twig extension that joins Webpack resultant files with Twig template engine in an easy way. This approach allows the dynamic insertion of the css stylesheets and js scripts with Webpack generated hash.
Also works well with extract-text-webpack-plugin
Install
$ composer require fullpipe/twig-webpack-extension
Set up Webpack
You need to install the webpack-manifest-plugin
$ npm install webpack-manifest-plugin --save-dev
# or with Yarn
$ yarn add webpack-manifest-plugin --dev
Configure webpack.config.js
// webpack.config.js var ManifestPlugin = require('webpack-manifest-plugin'); (...) module.exports = { (...) entry: { vendor: ["jquery", "lodash"], main: './src/main.js' }, output: { (...) path: './js' publicPath: '/', // required (...) }, plugins: [ new ManifestPlugin(), new ExtractTextPlugin({ filename: './../css/[name].css', publicPath: '/' }), (...) ] }
Register as a service the Twig extension inside Symfony
# app/config/services.yml parameters: (...) webpack.manifest: "%kernel.root_dir%/../web/build/manifest.json" #should be absolute webpack.public_path_js: /js/ webpack.public_path_css: /css/ services: (...) twig_extension.webpack: class: Fullpipe\TwigWebpackExtension\WebpackExtension public: false arguments: - "%webpack.manifest%" - "%webpack.public_path_js%" - "%webpack.public_path_css%" tags: - { name: twig.extension }
Inject entry points to your Twig
{# app/Resources/views/base.html.twig #} (...) <head> (...) {% webpack_entry_css 'main' %} </head> <body> (...) {% webpack_entry_js 'vendor' %} {% webpack_entry_js 'main' %} </body>
Hashing output files avoiding the browser cache
If you use [hash] or [chunkhash]:
// webpack.config.js (...) output: { (...) filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js' }, plugins: [ (...) new ExtractTextPlugin({ filename: './../css/[name].[contenthash].css', publicPath: '/' }), (...) ]
You should clear twig cache after each webpack compilation. So for dev environment do not use
[hash]or[chunkhash].
统计信息
- 总下载量： 107.82k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 1
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2019-10-28