Saturday, March 18, 2017

Webpack compiled Javascript issues

I recently started working on a project with Laravel 5.4, which uses Webpack instead of Gulp.

When I compile the same set of javascript files in Webpack, there seems to be a syntax issue in the compiled file.

Webpack (Laravel 5.4):

mix.js([
        "resources/assets/backend/assets/plugins/pace/pace.min.js",
        "resources/assets/backend/assets/plugins/jquery/jquery-1.11.1.min.js",
        "resources/assets/backend/assets/plugins/modernizr.custom.js",
        "resources/assets/backend/assets/plugins/jquery-ui/jquery-ui.min.js",
        "resources/assets/backend/assets/plugins/boostrapv3/js/bootstrap.min.js",
        "resources/assets/backend/assets/plugins/jquery/jquery-easy.js",
        "resources/assets/backend/assets/plugins/jquery-unveil/jquery.unveil.min.js",
        "resources/assets/backend/assets/plugins/jquery-bez/jquery.bez.min.js",
        "resources/assets/backend/assets/plugins/jquery-ios-list/jquery.ioslist.min.js",
        "resources/assets/backend/assets/plugins/jquery-actual/jquery.actual.min.js",
        "resources/assets/backend/assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js",
        "resources/assets/backend/assets/plugins/bootstrap-select2/select2.min.js",
        "resources/assets/backend/assets/plugins/classie/classie.js",
        "resources/assets/backend/assets/plugins/switchery/js/switchery.min.js",
        "resources/assets/backend/assets/plugins/jquery-validation/js/jquery.validate.min.js",
        "resources/assets/backend/js/pages.js",
        "resources/assets/backend/assets/js/scripts.js",
    ], 'public/js/backend/all.js')

And Gulp, Laravel 5.3 - which works without issues.

mix.scripts([
    "assets/plugins/pace/pace.min.js",
    "assets/plugins/jquery/jquery-1.11.1.min.js",
    "assets/plugins/modernizr.custom.js",
    "assets/plugins/jquery-ui/jquery-ui.min.js",
    "assets/plugins/boostrapv3/js/bootstrap.min.js",
    "assets/plugins/jquery/jquery-easy.js",
    "assets/plugins/jquery-unveil/jquery.unveil.min.js",
    "assets/plugins/jquery-bez/jquery.bez.min.js",
    "assets/plugins/jquery-ios-list/jquery.ioslist.min.js",
    "assets/plugins/jquery-actual/jquery.actual.min.js",
    "assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js",
    "assets/plugins/bootstrap-select2/select2.min.js",
    "assets/plugins/classie/classie.js",
    "assets/plugins/switchery/js/switchery.min.js",
    "assets/plugins/jquery-validation/js/jquery.validate.min.js",
    "js/pages.js",
    "assets/js/scripts.js",
],'public/js/backend/all.js','resources/assets/backend');

Browser Inspect: enter image description here

enter image description here

I see that web pack adds it's code as well:

* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
 */
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))

/***/ }),
/* 30 */
/***/ (function(module, exports) {

How to debug/fix this?



via Santosh Achari

Advertisement