Hướng dẫn loading css

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học webpack
• Webpack css loader

Cài đặt và setting Webpack css loader

• Khi làm việc với Webpack, bạn cần tập làm quen với việc import css ngay bên trong file javascript, việc này sẽ tiện lợi cho việc sắp xếp, dọn dẹp tự động có trong Webpack.
• Để xử lý việc import CSS bên trong một file Javascript, chúng ta cần:
  • Cài đặt style-loader: Giúp thêm CSS vào DOM dưới dạng cấu trúc style.
  • Cài đặt css-loader: Giúp biên dịch @import và url().
• Để hiểu rõ hơn về style-loader và css-loader, ta xem ví dụ như bên dưới nhé:

Loading CSS

• Trước tiên ta tạo file style.css bên trong thư mục src với nội dung sau:

Nội dung file /dist/index.html

Thực hiện import nội dung /src/style.css vào /src/index.js

import './style.css';
function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello World!';
  return element;
}
document.body.appendChild(component());

Webpack-project

• node_modules

  • ...
• package.json
• webpack.config.js
• package-lock.json

• dist

• src

• Khi này click chạy file /dist/index.html ta thấy vẫn chưa có gì thay đổi:

Hiển thị trình duyệt

Hello World!

This content called from my-test.js!

• Để javascript nhận được import './style.css'; ta thực hiện như sau:

Cài đặt style-loader và css-loader

npm install --save-dev style-loader css-loader

Kết quả

• Chỉnh lại file webpack.config.js với nội dung sau:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    newfile: [
      './src/index.js',
      './src/my-test.js'
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

• Tiến hành chạy lệnh npm để thực thi nội dung trên:

• Khi này click chạy file /dist/index.html ta thấy nội dung bên trong /src/style.css đã được gọi:

Hiển thị trình duyệt

Hello World!

This content called from my-test.js!

• Lúc này xem lại nội dung bên trong /dist/index.html vẫn không có gì thay đổi.

Các lệnh chính đã sử dụng trong toàn bộ bài học

cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli

npx webpack

npx webpack --config webpack.config.js
npm run build

npm run build

npm install --save lodash
npm run build
npm run build

npm install --save-dev html-webpack-plugin
npm run build

npm install --save-dev clean-webpack-plugin
npm run build

npm run build
npm run build

npm run build

npm run build
npm run build

npm install --save-dev style-loader css-loader
npm run build