webpack + jquery + materialize-css

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

webpack + jquery + materialize-css

vendors

yarn add materialize-css jquery hammerjs

webpack.config.js

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

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

  "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

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

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

  "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:

1. issue solved

2. babel-loader