hostnet / webpack-bundle Goto Github PK

View Code? Open in Web Editor NEW

67.0 67.0 17.0 351 KB

Allows pre-processing of assets such as less, sass, css etc.

License: MIT License

PHP 91.89% JavaScript 0.72% Twig 7.40%

webpack-bundle's People

Contributors

Stargazers

Watchers

Forkers

studionone akomm wouterj eljam emilnordh tvnu dratel29 cgraefe zalox jasperras akester aviinl nicoschoenmaker svandervlugt phonixor janlam7 mvannes

webpack-bundle's Issues

Hot reload feature

It's possible to have a hot reload feature for webpack. Can that be integrated? @haroldiedema

see:
http://webpack.github.io/docs/webpack-dev-server.html

http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Mistake in documentation : extract-text-webpack-plugin not webpack-extract-text-plugin

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

Documentation why this is a useful replacement of assetics

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.

Removal of useful configuration options in #07d9e3a

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?

07d9e3a#diff-4013e02b8b5330974727f71029e9eb1aL22

Output folder is not created

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.

Adding some tests to verify the twig compiler works

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.

More descriptive config errors

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.

generated code for ExtractTextPlugin is not compatible with latest ExtractTextPlugin

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);
      };
}

Sourcemaps?

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?

Webpack 2 / 3 Support?

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.

Hot reload feature?

Adding own loaders via "hostnet_webpack.config_extension" impossible

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:

webpack-bundle/src/Bundle/DependencyInjection/WebpackExtension.php

Line 33 in 4fed1aa

    
           $config_extension_ids = array_keys($container->findTaggedServiceIds('hostnet_webpack.config_extension'));

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.

Full example

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?

Setting up Travis to use Nodejs and Webpack

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.

Setup Travis
Add tests

Missing UglifyJS documentation

Not much to document but should be mentioned under plugins.

Tracker fails on non-tracked bundles

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

Deprecate the inline feature

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.

Override assetic tags

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.

Webpack inline no longer works after initial compile.

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.

Twig deprecations

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?

Webpack inline scripts brake on Windows/XAMPP

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.

Untracked templates feature is missing?

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