https://github.com/daggerok/webpak-jquery

This repo contains worked webpack configurations for: 1) jquery (and for materialize-css) usage; 2) babel-loader@8 + webpack@3 + @babel/preset-env and @babel/preset-stage-0 usage; 3) html minify options on gh-pages deployment
https://github.com/daggerok/webpak-jquery

jquery materialize-css webpack

Last synced: 6 months ago
JSON representation

This repo contains worked webpack configurations for: 1) jquery (and for materialize-css) usage; 2) babel-loader@8 + webpack@3 + @babel/preset-env and @babel/preset-stage-0 usage; 3) html minify options on gh-pages deployment

• Host: GitHub
• URL: https://github.com/daggerok/webpak-jquery
• Owner: daggerok
• License: mit
• Created: 2018-01-21T17:58:23.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-21T19:33:08.000Z (over 8 years ago)
• Last Synced: 2025-01-10T00:37:20.721Z (over 1 year ago)
• Topics: jquery, materialize-css, webpack
• Language: JavaScript
• Homepage: https://daggerok.github.io/webpak-jquery
• Size: 2.25 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.adoc
  • License: LICENSE

Awesome Lists containing this project

README

          
= webpack + jquery + materialize-css image:https://travis-ci.org/daggerok/webpak-jquery.svg?branch=master["Build Status", link="https://travis-ci.org/daggerok/webpak-jquery"]

This repo contains worked webpack configuration for jquery (and for materialize-css) usage.

=== webpack + jquery + materialize-css

.vendors

[source,bash]

----

yarn add materialize-css jquery hammerjs

----

.webpack.config.js

[source,javascript]

----

const { ProvidePlugin } = require('webpack');

const { resolve } = require('path');

module.exports = {

  // ...

  resolve: {

    resolve: {

      alias: {

        'jquery': resolve('node_modules/jquery/dist/jquery.js'),

      },

    },

  },

  plugins: [

    new ProvidePlugin({

      $: 'jquery',

      jQuery: 'jquery',

      'window.$': 'jquery',

      'window.jQuery': 'jquery',

    }),

  ],

  // ...

};

----

.main.js

[source,javascript]

----

import $ from 'jquery';

import 'hammerjs/hammer.js';

import 'materialize-css/dist/js/materialize.js';

$(".button-collapse").sideNav();

----

=== babel-loader@8 + @core/babel + @core/babel-preset-env + @core/babel-preset-stage-0

.package.json

[source,json]

----

  "devDependencies": {

    "@babel/core": "7.0.0-beta.38",

    "@babel/preset-env": "7.0.0-beta.38",

    "@babel/preset-stage-0": "7.0.0-beta.38",

    "babel-loader": "8.0.0-beta.0",

    "webpack": "3.10.0"

  },

  "babel": {

    "presets": [

      "@babel/preset-env",

      "@babel/preset-stage-0"

    ]

  }

----

.webpack.config.js

[source,javascript]

----

module.exports = {

  module: {

    rules: [

      {

        test: /\.js$/i,

        exclude: /(node_modules|bower_components)/i,

        use: {

          loader: 'babel-loader',

          options: {

            presets: [

              '@babel/preset-env',

              '@babel/preset-stage-0',

            ],

          },

        },

      },

    ],

  },

  // ...

};

----

=== webpack minify html

.webpack.config.js

[source,javascript]

----

const HtmlWebpackPlugin = require('html-webpack-plugin');

const publicPath = process.env.BASE_PATH || '';

module.exports = {

  plugins: [

    new HtmlWebpackPlugin({

      template: './app/index.html',

      favicon: './app/favicon.ico',

      minify: !!publicPath ? {

        collapseWhitespace: true,

        removeComments: true,

        minifyCSS: true,

        minifyJS: true,

      } : false,

    }),

  ],

  // ...

};

----

.package.json

[source,json]

----

  "devDependencies": {

    "cross-env": "5.1.3",

    "html-webpack-plugin": "2.30.1",

    "webpack": "3.10.0"

  },

  "scripts": {

    "build": "webpack -p",

    "gh-pages": "cross-env BASE_PATH='/webpak-jquery/' yarn build"

  }

----

links:

. link:https://github.com/Dogfalo/materialize/issues/4521#issuecomment-293172209[issue solved]

. link:https://github.com/babel/babel-loader[babel-loader]