Hướng dẫn webpack css

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

Nội dung chính Show

Cài đặt và setting Webpack css loader
Loading CSS
Cài đặt import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component());5 và import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component());6

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

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

5: Giúp thêm CSS vào DOM dưới dạng cấu trúc style.

Cài đặt

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

6: Giúp biên dịch

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

7 và

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

Để hiểu rõ hơn về

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

5 và

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

6, ta xem ví dụ như bên dưới nhé:

Loading CSS

Trước tiên ta tạo file

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

1 bên trong thư mục

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

2 với nội dung sau:

Nội dung file

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

Thực hiện import nội dung

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

4 vào

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

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
```
npm install --save-dev style-loader css-loader
```
3 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
```
npm install --save-dev style-loader css-loader
```
7 ta thực hiện như sau:

Cài đặt

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

5 và

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

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

Kết quả

Chỉnh lại file

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'
        ]
      }
    ]
  }
};

0 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

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

3 ta thấy nội dung bên trong

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

4 đã được gọi:

Hiển thị trình duyệt

Hello World!

This content called from my-test.js!

Để javascript nhận được
```
npm install --save-dev style-loader css-loader
```
7 ta thực hiện như sau:

Cài đặt import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component());5 và import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component());6

Kết quả	Chỉnh lại file 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' ] } ] } }; 0 với nội dung sau:
Tiến hành chạy lệnh npm để thực thi nội dung trên:	cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli
Khi này click chạy file npm install --save-dev style-loader css-loader 3 ta thấy nội dung bên trong npm install --save-dev style-loader css-loader 4 đã được gọi:	npx webpack
Lúc này xem lại nội dung bên trong npm install --save-dev style-loader css-loader 3 vẫn không có gì thay đổi.	npx webpack --config webpack.config.js npm run build
Các lệnh chính đã sử dụng trong toàn bộ bài học	npm run build
Bài học	npm install --save lodash npm run build npm run build
Lệnh đã dùng	npm install --save-dev html-webpack-plugin npm run build
Cài đặt Webpack	import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component()); 0
Webpack bundle	import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component()); 1
Cấu hình Webpack	npm run build
Webpack quản lý output	import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component()); 1
Webpack code splitting	import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello World!'; return element; } document.body.appendChild(component()); 4

Hướng dẫn webpack css - webpack css

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

Loading CSS

Nội dung file npm install --save-dev style-loader css-loader3

Thực hiện import nội dung npm install --save-dev style-loader css-loader4 vào npm install --save-dev style-loader css-loader5

Hiển thị trình duyệt

Hiển thị trình duyệt

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Nội dung file
npm install --save-dev style-loader css-loader
3

Thực hiện import nội dung
npm install --save-dev style-loader css-loader
4 vào
npm install --save-dev style-loader css-loader
5