hostnet / webpack-bundle Goto Github PK
View Code? Open in Web Editor NEWAllows pre-processing of assets such as less, sass, css etc.
License: MIT License
Allows pre-processing of assets such as less, sass, css etc.
License: MIT License
It's possible to have a hot reload feature for webpack. Can that be integrated? @haroldiedema
Hello first of all thank you for this bundle I am starting with SF3.* and I really appreciate this bundle concept.
I just figured out this small mistake on the documentation page :
You talk about installing webpack-extract-text-plugin and now it has an other name :
https://www.npmjs.com/package/extract-text-webpack-plugin
Just a little typo error
We currently have a decent documentation but I'm missing the part where we can "sell" to developers why this is a good replacement for Assetics.
Assetics give a lot of developers a headache and I would like them (and myself) to have a replacement that does not want to make your head bang on the table. The problem is that as a developer I currently don't see why webpack with this bundle would solve my problem.
Hi,
I'm trying to use this project, but I have a somewhat different setup than the standard settings for assets and javascript sources. I was wondering why these configuration options was removed, or if could they be reintroduced?
I am experiencing a problem - the output folder does not get created.
No errors shown.
src/App/FrontendBundle/Resources/views/test.html.twig
(copy is in src/App/FrontendBundle/Resources/test.html.twig):
<html>
<head>
</head>
<body>
<script src="{{ webpack_asset('@FrontendBundle/public/js/test.js').js }}"></script>
<script src="{{ webpack_public('@FrontendBundle/js/test.js').js }}"></script>
</body>
</html>
src/App/FrontendBundle/Resources/assets/js/test.js
(copy is in src/App/FrontendBundle/Resources/assets/public/js and src/App/FrontendBundle/Resources/public/js):
alert('test!');
config.yml:
webpack:
bundles:
- FrontendBundle
output:
path: '%kernel.root_dir%/../web/compiled/'
dump_path: '%kernel.root_dir%/../web/bundles/'
public_path: '/compiled/'
node:
binary: '/usr/bin/node'
node_modules_path: '%kernel.root_dir%/../node_modules'
Running as php bin/console webpack:compile
Am I missing something? Thanks.
Before releasing 1.0, I would like to see some functional tests to prove that the twig compiler is working as intended. The only way of testing it right now is to hook it up in an application and give it a shot there.
When installing the bundle I got the following error:
Webpack is not installed in path "".
Which tells me nothing. After some digging, it meant that that I need to configure the node_modules_path
in the node
config.
Can you make the config error also provide a possible solution. I.e.: did you forget to configure the node_modules_path?
or something.
If I install the latest version of extract-text-webpack-plugin(@2.1.0), I get the following error:
Error: Breaking change: ExtractTextPlugin now only takes a single argument. Either an options object *or* the name of the result file.
Example: if your old code looked like this:
new ExtractTextPlugin('css/[name].css', { disable: false, allChunks: true })
You would change it to:
new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
They changed the signature of ExtractTextPlugin.
Maybe we can make it work for both versions by overriding fn_extract_text_plugin_css:
var fn_extract_text_plugin_css = require("extract-text-webpack-plugin");
if (fn_extract_text_plugin_css.length < 2) {
fn_extract_text_plugin_css = function (filename, options) {
options.filename = filename;
return require('extract-text-webpack-plugin')(options);
};
}
Hey there, quick question: does this bundle support generation of sourcemaps through WebPack? Leveraging Babel is a brilliant idea, as is the ability to leverage the numerous WebPack plugins, but giving up sourcemaps when in development would be a shame.
Also, just to clarify, if I have a project with a number of bundles, within the Javascript I can just require('@ExampleBundle/some.js')
within, say AnotherBundle/Resources/assets/main.js
?
I have a use case from some additional plug-ins (SVG Sprites, image optimization, etc) but I guess I'd be a lot more comfortable building these for Webpack 2 or 3 vs Webpack 1.
Is updated Webpack support in the works? I'd be happy to help contribute if help is needed.
The services are loaded in the WebpackExtension, making it impossible to add own loaders - e. G. sass - using the "hostnet_webpack.config_extension" tag. Is there any problem moving it into a compiler pass?
See loading in WebpackExtension:
edit
It only does not work, when you register your services via Extension, so they are not "visible" when WebpackExtension is loading the config-extensions.
I'm having some issues getting this all to work. Everything is configured correctly and it is compiling my output to a JS file. However, it is not including the compiled JS.
My twig file:
<html>
<head>
<script src="{{ webpack_asset('@AppBundle/app.js').js }}"></script>
</head>
<body>
</body>
</html>
My app.js:
document.write("HENK");
The output html:
<html>
<head>
<script src=""></script>
</head>
<body>
</body>
</html>
and the outputed JS: (app_bundle.app.js
)
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
document.write("HENK");
/***/ }
/******/ ]);
Am I missing something?
It's possible to setup Travis to use NodeJS and Webpack. This means we can actually test a full compilation of the twig templates with the compiled output of Webpack.
Not much to document but should be mentioned under plugins.
In the Tracker::boot()
there is a call to TemplateFinderInterface::findAllTemplates()
which will return all the templates in your project. So all templates will be added to the tracker list.
However, when I configure the webpack bundle to only track a specific bundle this will add things which should not be tracked and this causes a notice in the resolvePath since it cannot find the bundle in the list of tracked bundles.
For example:
webpack:
bundles:
- AppBundle
This will throw the following error:
Notice: Undefined index: DoctrineBundle
With the new release of twig, the inline feature has been even more unstable than before. We also had issues before that sometimes the inline did not work correctly and opted to use a 'workaround' to use the normal behavior.
Moreover, the inline feature is not complete. It does not parse twig correctly since variables cannot be replaces. This can cause a lot of confusion for new people working with it.
I propose to deprecate the inline feature and possible remove it in future releases.
For migration purposes it would be nice to override the assetic twig tags, in order to use webpack instead.
We also could log where it has been used to later migrate with the proper tags.
The compiled source is no longer included when using the inline
-tag after modifying the inline code and doing a page reload.
{% webpack inline js %}
var graph = require('@SomeBundle/Graph.jsx');
console.log(graph);
{% endwebpack %}
The above works initially on a clean cache. After modifying the inline code (e.g. adding a new line or whatever), the script-tag including the compiled code is no longer included in the template.
The file compiles correctly though and shows up in the compile output in the profiler.
Some methods used by webpack-bundle where deprecated since Twig 1.27, eg:
User Deprecated: Passing a string as the $source argument of Twig_Environment::tokenize() is deprecated since version 1.27. Pass a Twig_Source instance instead.
Is it possible to fix these deprecations?
I am currently using Windows and XAMPP for development. Webpack inline scripts do not work here, because file paths seem to be calculated inconsistently. The same template will be referred to in WebpackTockenParser as:
D:\src\projectx\app\Resources\views\base.html.twig
and in TwigParser as:
D:\src\projectx\app\Resources\views/base.html.twig
This then results in different md5 checksums and WebpackTokenParser will return a WebpackInlineNode referencing a non-existing file.
It's described to be shown in the profiler, but this private property is unused (only written to). Should this feature be removed or is it desired to be added in the future?
https://github.com/hostnet/webpack-bundle/blob/master/src/Component/Asset/Tracker.php#L69-L75
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.