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:
div {
  color: red;
}

Nội dung file /dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title<Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="newfile.js"></script></body>
</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 package.json
  • package.json webpack.config.js
  • package-lock.json package-lock.json

  • dist

    • package.json index.html
    • package.json newfile.js

  • src

    • package.json index.js
    • package.json my-test.js
    • package.json style.css
  • 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ả

Webpack merge javascript file

  • 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:
npm run build
  • 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

Bài học Lệnh đã dùng
Cài đặt Webpack 
cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
Webpack bundle 
npx webpack
Cấu hình Webpack 
npx webpack --config webpack.config.js
npm run build
Webpack quản lý output 
npm run build
Webpack code splitting 
npm install --save lodash
npm run build
npm run build
Cài đặt và setting HtmlWebpackPlugin 
npm install --save-dev html-webpack-plugin
npm run build
Cài đặt và setting CleanWebpackPlugin 
npm install --save-dev clean-webpack-plugin
npm run build
Webpack Cache 
npm run build
npm run build
Webpack gom chung các file javascript 
npm run build
Webpack source map 
npm run build
npm run build
Webpack css loader 
npm install --save-dev style-loader css-loader
npm run build

Webpack source map

Webpack minify CSS