Mini-css-giải nén-plugin

Plugin này trích xuất CSS thành các tệp riêng biệt. Nó tạo một tệp CSS trên mỗi tệp JS chứa CSS. Nó hỗ trợ Tải theo yêu cầu của CSS và SourceMaps

Nó được xây dựng dựa trên tính năng webpack v5 mới và yêu cầu webpack 5 hoạt động

So với extract-text-webpack-plugin

• Tải không đồng bộ
• Không biên dịch trùng lặp (hiệu suất)
• Dễ sử dụng hơn
• Dành riêng cho CSS

Bắt đầu

Để bắt đầu, bạn cần cài đặt

import "./style.css";

7

npm install --save-dev mini-css-extract-plugin

hoặc

yarn add -D mini-css-extract-plugin

hoặc

pnpm add -D mini-css-extract-plugin

Nên kết hợp

import "./style.css";

7 với

import "./style.css";

9

Sau đó, thêm trình tải và plugin vào cấu hình

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

0 của bạn. Ví dụ

Phong cách. css

body {
  background: green;
}

thành phần. js

import "./style.css";

gói web. cấu hình. js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

Cảnh báo

Lưu ý rằng nếu bạn nhập CSS từ điểm nhập webpack của mình hoặc nhập các kiểu trong đoạn, thì

import "./style.css";

7 sẽ không tải CSS này vào trang. Vui lòng sử dụng

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

2 để tạo thẻ

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3 tự động hoặc tạo tệp

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

4 bằng thẻ

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3

Cảnh báo

Bản đồ nguồn chỉ hoạt động với các giá trị

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

6/

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

7/

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

8/

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

9 vì CSS chỉ hỗ trợ bản đồ nguồn với nhận xét

npm install --save-dev mini-css-extract-plugin

90 (i. e.

npm install --save-dev mini-css-extract-plugin

91). Nếu bạn cần đặt

npm install --save-dev mini-css-extract-plugin

92 thành một giá trị khác, bạn có thể kích hoạt tạo bản đồ nguồn cho CSS được trích xuất bằng cách sử dụng cho

import "./style.css";

9

Tùy chọn

Tùy chọn plugin

npm install --save-dev mini-css-extract-plugin

95

Loại

npm install --save-dev mini-css-extract-plugin

9

Mặc định.

yarn add -D mini-css-extract-plugin

54

Tùy chọn này xác định tên của từng tệp CSS đầu ra

Hoạt động như

npm install --save-dev mini-css-extract-plugin

96

Loại

yarn add -D mini-css-extract-plugin

5

Mặc định.

yarn add -D mini-css-extract-plugin

57

Chỉ định

npm install --save-dev mini-css-extract-plugin

96 là

yarn add -D mini-css-extract-plugin

59 chỉ khả dụng trong webpack@5

Tùy chọn này xác định tên của các tập tin chunk không mục nhập

Hoạt động như

npm install --save-dev mini-css-extract-plugin

97

Loại

pnpm add -D mini-css-extract-plugin

2

Mặc định.

pnpm add -D mini-css-extract-plugin

22

Xóa cảnh báo đơn hàng. Xem bên dưới để biết chi tiết

npm install --save-dev mini-css-extract-plugin

98

Loại

pnpm add -D mini-css-extract-plugin

5

Mặc định.

pnpm add -D mini-css-extract-plugin

24

Chèn thẻ

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3 vào vị trí đã cho cho đoạn CSS

Cảnh báo

Chỉ dành cho khối

Theo mặc định, ________ 07 nối các kiểu (phần tử ____ 327) vào ____ 328 của ____ hiện tại ____329

Tuy nhiên, trong một số trường hợp, có thể cần phải kiểm soát tốt hơn đối với mục tiêu chắp thêm hoặc thậm chí trì hoãn việc chèn các phần tử

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3. Ví dụ: đây là trường hợp khi bạn tải kiểu không đồng bộ cho một ứng dụng chạy bên trong iframe. Trong những trường hợp như vậy,

npm install --save-dev mini-css-extract-plugin

98 có thể được định cấu hình thành một chức năng hoặc bộ chọn tùy chỉnh

Nếu bạn nhắm mục tiêu một khung nội tuyến, hãy đảm bảo rằng tài liệu gốc có đủ quyền truy cập để truy cập vào tài liệu khung và nối thêm các thành phần vào đó

pnpm add -D mini-css-extract-plugin

52

Cho phép thiết lập bộ chọn truy vấn tùy chỉnh. Phần tử

pnpm add -D mini-css-extract-plugin

27 mới sẽ được chèn sau mục tìm thấy

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

0

Phần tử

pnpm add -D mini-css-extract-plugin

27 mới sẽ được chèn sau phần tử có id

pnpm add -D mini-css-extract-plugin

55

yarn add -D mini-css-extract-plugin

59

Cho phép ghi đè hành vi mặc định và chèn kiểu ở bất kỳ vị trí nào

⚠Đừng quên rằng mã này sẽ chạy trong trình duyệt cùng với ứng dụng của bạn. Vì không phải tất cả các trình duyệt đều hỗ trợ các tính năng ECMA mới nhất như

pnpm add -D mini-css-extract-plugin

57,

pnpm add -D mini-css-extract-plugin

58,

pnpm add -D mini-css-extract-plugin

59, v.v., chúng tôi khuyên bạn chỉ nên sử dụng các tính năng và cú pháp của ECMA 5

⚠Hàm

npm install --save-dev mini-css-extract-plugin

98 được tuần tự hóa thành chuỗi và được chuyển đến plugin. Điều này có nghĩa là nó sẽ không có quyền truy cập vào phạm vi của mô-đun cấu hình webpack

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

1

Một phần tử

pnpm add -D mini-css-extract-plugin

27 mới sẽ được chèn vào trước phần tử có id

pnpm add -D mini-css-extract-plugin

55

npm install --save-dev mini-css-extract-plugin

99

Loại

yarn add -D mini-css-extract-plugin

2

Mặc định.

yarn add -D mini-css-extract-plugin

04

Cảnh báo

Chỉ dành cho khối

Nếu được xác định,

import "./style.css";

7 sẽ đính kèm các thuộc tính đã cho với các giá trị của chúng trên phần tử

pnpm add -D mini-css-extract-plugin

27

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

3

Ghi chú

Nó chỉ áp dụng cho các khối css được tải động, nếu bạn muốn sửa đổi các thuộc tính liên kết bên trong tệp html, vui lòng sử dụng html-webpack-plugin

yarn add -D mini-css-extract-plugin

50

Loại

yarn add -D mini-css-extract-plugin

4

Mặc định.

yarn add -D mini-css-extract-plugin

08

Tùy chọn này cho phép tải các khối không đồng bộ với loại liên kết tùy chỉnh, chẳng hạn như

yarn add -D mini-css-extract-plugin

09

pnpm add -D mini-css-extract-plugin

52

Những giá trị khả thi.

yarn add -D mini-css-extract-plugin

08

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

5

yarn add -D mini-css-extract-plugin

12

pnpm add -D mini-css-extract-plugin

22 vô hiệu hóa thuộc tính liên kết

yarn add -D mini-css-extract-plugin

14

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

6

yarn add -D mini-css-extract-plugin

51

Loại

yarn add -D mini-css-extract-plugin

7

Mặc định.

yarn add -D mini-css-extract-plugin

16

Cho phép bật/tắt tạo thời gian chạy. CSS sẽ vẫn được trích xuất và có thể được sử dụng cho phương thức tải tùy chỉnh. Ví dụ: bạn có thể sử dụng nội dung-webpack-plugin để truy xuất chúng, sau đó sử dụng mã thời gian chạy của riêng bạn để tải xuống nội dung khi cần

pnpm add -D mini-css-extract-plugin

22 để bỏ qua

gói web. cấu hình. js

yarn add -D mini-css-extract-plugin

8

yarn add -D mini-css-extract-plugin

52

Loại

yarn add -D mini-css-extract-plugin

9

Mặc định.

yarn add -D mini-css-extract-plugin

19

Được bật theo mặc định nếu không được bật rõ ràng (i. e.

yarn add -D mini-css-extract-plugin

16 và

pnpm add -D mini-css-extract-plugin

22 cho phép bạn kiểm soát rõ ràng tùy chọn này) và có API mới (ít nhất phải có webpack

yarn add -D mini-css-extract-plugin

22). Các giá trị boolean có sẵn kể từ phiên bản

yarn add -D mini-css-extract-plugin

23, nhưng bạn cần bật

yarn add -D mini-css-extract-plugin

24 (không bắt buộc đối với webpack

yarn add -D mini-css-extract-plugin

22)

Sử dụng API webpack mới để thực thi các mô-đun thay vì trình biên dịch con. Điều này cải thiện hiệu suất và sử dụng bộ nhớ rất nhiều

Khi được kết hợp với

yarn add -D mini-css-extract-plugin

26, tùy chọn này sẽ thêm tùy chọn

yarn add -D mini-css-extract-plugin

27 vào tùy chọn trình tải để chỉ định lớp thực thi css

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

0

Tùy chọn trình tải

yarn add -D mini-css-extract-plugin

28

Loại

pnpm add -D mini-css-extract-plugin

1

Mặc định.

yarn add -D mini-css-extract-plugin

28 trong

yarn add -D mini-css-extract-plugin

33

Chỉ định đường dẫn công khai tùy chỉnh cho các tài nguyên bên ngoài như hình ảnh, tệp, v.v. bên trong

yarn add -D mini-css-extract-plugin

34. Hoạt động như

pnpm add -D mini-css-extract-plugin

52

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

2

yarn add -D mini-css-extract-plugin

59

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

3

yarn add -D mini-css-extract-plugin

29

Loại

pnpm add -D mini-css-extract-plugin

4

Mặc định.

yarn add -D mini-css-extract-plugin

16

Nếu đúng, phát ra tệp (ghi tệp vào hệ thống tệp). Nếu sai, plugin sẽ trích xuất CSS nhưng sẽ không phát ra tệp. Việc tắt tùy chọn này cho các gói phía máy chủ thường hữu ích

yarn add -D mini-css-extract-plugin

30

Loại

pnpm add -D mini-css-extract-plugin

5

Mặc định.

yarn add -D mini-css-extract-plugin

16

Theo mặc định,

import "./style.css";

7 tạo các mô-đun JS sử dụng cú pháp mô-đun ES. Có một số trường hợp sử dụng mô-đun ES có lợi, chẳng hạn như trong trường hợp nối mô-đun và rung cây

Bạn có thể kích hoạt cú pháp CommonJS bằng cách sử dụng

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

6

ví dụ

Khuyến khích

For

yarn add -D mini-css-extract-plugin

43 builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the

import "./style.css";

7, because it creates separate css files. For

yarn add -D mini-css-extract-plugin

45 mode (including

yarn add -D mini-css-extract-plugin

46) you can use style-loader, because it injects CSS into the DOM using multiple and works faster.

Không sử dụng đồng thời

yarn add -D mini-css-extract-plugin

47 và

import "./style.css";

7

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

7

ví dụ tối thiểu

gói web. cấu hình. js

pnpm add -D mini-css-extract-plugin

8

Xuất có tên cho Mô-đun CSS

⚠Tên của người dân địa phương được chuyển đổi thành

yarn add -D mini-css-extract-plugin

49

⚠Không được phép sử dụng các từ dành riêng cho JavaScript trong tên lớp css

⚠Tùy chọn

yarn add -D mini-css-extract-plugin

30 và

yarn add -D mini-css-extract-plugin

51 trong

import "./style.css";

9 phải được bật

phong cách. css

pnpm add -D mini-css-extract-plugin

9

mục lục. js

body {
  background: green;
}

0

Bạn có thể kích hoạt mô-đun ES có tên export bằng cách sử dụng

gói web. cấu hình. js

body {
  background: green;
}

1

Tùy chọn yarn add -D mini-css-extract-plugin28 là chức năng

gói web. cấu hình. js

body {
  background: green;
}

2

Ví dụ cấu hình nâng cao

Không nên sử dụng plugin này với

yarn add -D mini-css-extract-plugin

47 trong chuỗi trình tải

Đây là một ví dụ để có cả HMR trong

yarn add -D mini-css-extract-plugin

45 và phong cách của bạn được trích xuất trong một tệp dành cho bản dựng

yarn add -D mini-css-extract-plugin

43

(Các tùy chọn bộ tải bị bỏ qua để rõ ràng, điều chỉnh cho phù hợp với nhu cầu của bạn. )

Bạn không nên sử dụng plugin

yarn add -D mini-css-extract-plugin

57 nếu bạn đang sử dụng

yarn add -D mini-css-extract-plugin

46.

yarn add -D mini-css-extract-plugin

46 bật/tắt HMR bằng tùy chọn

yarn add -D mini-css-extract-plugin

60

gói web. cấu hình. js

body {
  background: green;
}

3

Tải lại mô-đun nóng (HMR)

Ghi chú

HMR được hỗ trợ tự động trong webpack 5. Không cần phải cấu hình nó. Bỏ qua những điều sau đây

import "./style.css";

7 hỗ trợ tải lại nóng các tệp css thực tế đang được phát triển. Một số tùy chọn được cung cấp để bật HMR của cả biểu định kiểu tiêu chuẩn và mô-đun CSS hoặc CSS có phạm vi cục bộ. Dưới đây là cấu hình ví dụ về mini-css để sử dụng HMR với các mô-đun CSS

Bạn không nên sử dụng plugin

yarn add -D mini-css-extract-plugin

57 nếu bạn đang sử dụng

yarn add -D mini-css-extract-plugin

46.

yarn add -D mini-css-extract-plugin

46 bật/tắt HMR bằng tùy chọn

yarn add -D mini-css-extract-plugin

60

gói web. cấu hình. js

body {
  background: green;
}

4

Giảm thiểu sản xuất

Để thu nhỏ đầu ra, hãy sử dụng plugin như css-minimizer-webpack-plugin

gói web. cấu hình. js

body {
  background: green;
}

5

Điều này sẽ chỉ cho phép tối ưu hóa CSS trong chế độ sản xuất. Nếu bạn cũng muốn chạy nó trong quá trình phát triển, hãy đặt tùy chọn

yarn add -D mini-css-extract-plugin

66 thành true

Sử dụng CSS được tải sẵn hoặc nội tuyến

Mã thời gian chạy phát hiện CSS đã thêm thông qua thẻ

pnpm add -D mini-css-extract-plugin

27 hoặc

yarn add -D mini-css-extract-plugin

68. Điều này có thể hữu ích khi đưa CSS vào phía máy chủ cho Kết xuất phía máy chủ.

yarn add -D mini-css-extract-plugin

69 của thẻ

pnpm add -D mini-css-extract-plugin

27 phải khớp với URL sẽ được sử dụng để tải đoạn CSS. Thuộc tính

yarn add -D mini-css-extract-plugin

71 cũng có thể được sử dụng cho

pnpm add -D mini-css-extract-plugin

27 và

yarn add -D mini-css-extract-plugin

68. Khi nội tuyến CSS

yarn add -D mini-css-extract-plugin

71 phải được sử dụng

Trích xuất tất cả CSS trong một tệp duy nhất

CSS có thể được trích xuất trong một tệp CSS bằng cách sử dụng

yarn add -D mini-css-extract-plugin

75

gói web. cấu hình. js

body {
  background: green;
}

6

Lưu ý rằng nên sử dụng

yarn add -D mini-css-extract-plugin

14 thay vì

yarn add -D mini-css-extract-plugin

77 trong Webpack 5, nếu không, một tệp

yarn add -D mini-css-extract-plugin

78 bổ sung có thể được tạo bên cạnh tệp

yarn add -D mini-css-extract-plugin

79. Điều này là do

yarn add -D mini-css-extract-plugin

77 không biết nên loại bỏ mô-đun nào (trong trường hợp này, nó sẽ không phát hiện ra rằng nên loại bỏ

yarn add -D mini-css-extract-plugin

78)

Trích xuất CSS dựa trên mục nhập

Bạn cũng có thể trích xuất CSS dựa trên tên mục webpack. Điều này đặc biệt hữu ích nếu bạn nhập định tuyến động nhưng muốn giữ CSS của mình được gói theo mục nhập. Điều này cũng ngăn chặn sự cố sao chép CSS mà người ta gặp phải với ExtractTextPlugin

body {
  background: green;
}

7

Tên tệp Tùy chọn là chức năng

Với tùy chọn

npm install --save-dev mini-css-extract-plugin

95, bạn có thể sử dụng dữ liệu khối để tùy chỉnh tên tệp. Điều này đặc biệt hữu ích khi xử lý nhiều điểm vào và muốn kiểm soát nhiều hơn tên tệp cho một điểm vào/đoạn nhất định. Trong ví dụ bên dưới, chúng tôi sẽ sử dụng

npm install --save-dev mini-css-extract-plugin

95 để xuất css được tạo vào một thư mục khác

gói web. cấu hình. js

body {
  background: green;
}

8

Bộ nhớ đệm dài hạn

Để sử dụng bộ nhớ đệm dài hạn

yarn add -D mini-css-extract-plugin

84. Tùy chọn thêm

yarn add -D mini-css-extract-plugin

85

gói web. cấu hình. js

body {
  background: green;
}

9

Xóa cảnh báo đơn hàng

Đối với các dự án mà thứ tự css đã được giảm thiểu thông qua việc sử dụng nhất quán các quy ước đặt tên hoặc phạm vi, chẳng hạn như Mô-đun CSS, cảnh báo thứ tự css có thể bị vô hiệu hóa bằng cách đặt cờ ignoreOrder thành true cho plugin

gói web. cấu hình. js

import "./style.css";

0

Nhiều chủ đề

gói web. cấu hình. js

import "./style.css";

1

src/chỉ mục. js

import "./style.css";

2

src/dark-theme/_vars. scss

import "./style.css";

3

src/light-theme/_vars. scss

import "./style.css";

4

src/phong cách. scss

import "./style.css";

5

công khai/chỉ mục. html

import "./style.css";

6

Plugin truy vấn phương tiện

Nếu bạn muốn trích xuất các truy vấn phương tiện từ CSS đã trích xuất (để người dùng di động không cần tải CSS dành riêng cho máy tính để bàn hoặc máy tính bảng nữa), bạn nên sử dụng một trong các plugin sau