Webpack 5: Webpack import jQuery - Materialize

Webpack từ A đến Á cùng kentrung

Bài trước chúng ta đã biết cách thêm thư viện jQuery vào trong webpack. Bài hôm nay sẽ tiếp tục học cách thêm thư viện Materialize phiên bản 1.0.0

1. Chuẩn bị file và tình huống

Các file code ban đầu:

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack từ A đến Á cùng kentrung</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <div class="container">
    <div class="carousel">
      <a class="carousel-item" href="#one!">
        <img src="https://i.ibb.co/4JCR00W/1.jpg" />
      </a>
      <a class="carousel-item" href="#two!">
        <img src="https://i.ibb.co/zbsVWH7/2.jpg" />
      </a>
      <a class="carousel-item" href="#three!">
        <img src="https://i.ibb.co/480Xtbk/3.jpg" />
      </a>
      <a class="carousel-item" href="#four!">
        <img src="https://i.ibb.co/nnQtdbK/4.jpg" />
      </a>
      <a class="carousel-item" href="#five!">
        <img src="https://i.ibb.co/X4VCcbX/5.jpg" />
      </a>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

Trang html này mình định tạo Carousel của Materialize, vì mình chưa học cách thêm css vào trong webpack nên tạm thời thêm css qua link CDN như này.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

$(document).ready(function(){
  $('.carousel').carousel()
})

Đoạn code trên có tác dụng tự động chạy Carousel. Chạy thử webpack ta có giao diện trắng tinh và log như sau:

Uncaught ReferenceError: $ is not defined at (main.js:1)

2. Load jQuery

Bài trước đã hướng dẫn cách thêm jQuery rồi nhưng thôi bài này hướng dẫn lại từ đầu cho dễ theo dõi. Trước tiên mình phải cài đặt jQuery qua npm

npm install jquery

Sau khi tải xong jQuery tiếp theo ta sửa lại webpack.config.js để thêm jQuery thông qua provide plugin của webpack

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Vậy là chúng ta đã giải quyết xong vấn đề thêm jQuery để hiểu được các kí tự $ trong code src/index.js. Chạy thử webpack và chúng ta có log lỗi như sau:

Uncaught TypeError: e(...).carousel is not a function at (main.js:1)

Cái này là do chúng ta chưa thêm Materialize Javascript, hàm carousel là của Materialize chứ không phải của jQuery nên nó không hiểu là đúng rồi.

3. Load Materialize

Tải Materialize qua npm

npm install materialize-css@next

Bước tiếp theo là chúng ta load Materialize Javascript vào trong file src/index.js

import 'materialize-css'

$(document).ready(function(){
  $('.carousel').carousel()
})

Câu lệnh import kia nó sẽ tự động tìm trong node-modules rồi đến materialize-css. Trong module này file package.json có khai báo

"main": "dist/js/materialize.js"

nên câu lệnh import ở trên chỉ là viết tắt của:

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

Chạy lại webpack npm run dev và kết quả là ... vẫn đ*o chạy được, vẫn lỗi như cũ

Uncaught TypeError: e(...).carousel is not a function at (main.js:1)

Mất khá nhiều thời gian search trên mạng, tốn bao nhiêu nơ ron thần kinh để suy nghĩ tại sao lại vậy. Cuối cùng mình cũng tìm được ra cách fix lỗi nhưng cũng chưa biết giải thích rõ lí do tại sao, các bạn pro có thể comment giải thích giúp mình nhé. Ta sửa lại file webpack.config.js và thêm giá trị cho các key jQuery

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}