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ụngconst 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ệpconst 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étnpm 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 đặtnpm 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 choimport "./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
9Mặc định.
yarn add -D mini-css-extract-plugin
54Tù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
5Mặc định.
yarn add -D mini-css-extract-plugin
57Chỉ đị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
2Mặc định.
pnpm add -D mini-css-extract-plugin
22Xó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
5Mặc định.
pnpm add -D mini-css-extract-plugin
24Chè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ỉnhNế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
52Cho 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ấygói web. cấu hình. js
yarn add -D mini-css-extract-plugin
0Phầ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
55yarn add -D mini-css-extract-plugin
59Cho 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
1Mộ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
55npm install --save-dev mini-css-extract-plugin
99
Loại
yarn add -D mini-css-extract-plugin
2Mặc định.
yarn add -D mini-css-extract-plugin
04Cả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
27gói web. cấu hình. js
yarn add -D mini-css-extract-plugin
3Ghi 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
4Mặc định.
yarn add -D mini-css-extract-plugin
08Tù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
09pnpm add -D mini-css-extract-plugin
52Những giá trị khả thi.
yarn add -D mini-css-extract-plugin
08gói web. cấu hình. js
yarn add -D mini-css-extract-plugin
5yarn add -D mini-css-extract-plugin
12pnpm 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
14gói web. cấu hình. js
yarn add -D mini-css-extract-plugin
6yarn add -D mini-css-extract-plugin
51
Loại
yarn add -D mini-css-extract-plugin
7Mặc định.
yarn add -D mini-css-extract-plugin
16Cho 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ỏ quagói web. cấu hình. js
yarn add -D mini-css-extract-plugin
8yarn add -D mini-css-extract-plugin
52
Loại
yarn add -D mini-css-extract-plugin
9Mặ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 cssgói web. cấu hình. js
pnpm add -D mini-css-extract-plugin
0Tùy chọn trình tải
yarn add -D mini-css-extract-plugin
28
Loại
pnpm add -D mini-css-extract-plugin
1Mặc định.
yarn add -D mini-css-extract-plugin
28 trong yarn add -D mini-css-extract-plugin
33Chỉ đị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
52gói web. cấu hình. js
pnpm add -D mini-css-extract-plugin
2yarn add -D mini-css-extract-plugin
59gói web. cấu hình. js
pnpm add -D mini-css-extract-plugin
3yarn add -D mini-css-extract-plugin
29
Loại
pnpm add -D mini-css-extract-plugin
4Mặc định.
yarn add -D mini-css-extract-plugin
16Nế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
5Mặc định.
yarn add -D mini-css-extract-plugin
16Theo 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
6ví 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
7ví dụ tối thiểu
gói web. cấu hình. js
pnpm add -D mini-css-extract-plugin
8Xuấ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 trongimport "./style.css";9 phải được bật
phong cách. css
pnpm add -D mini-css-extract-plugin
9mụ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-plugin
28 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
60gó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
60gó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 trueSử 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ụngTrí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
75gó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ácgó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
85gó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