The Webpack plugin for pack same CSS media query rules into one using PostCSS.
Before:
.foo {
width: 240px;
}
@media (max-width: 768px) {
.foo {
width: 576px;
}
}
.bar {
width: 160px;
}
@media (max-width: 768px) {
.bar {
width: 384px;
}
}After:
.foo {
width: 240px;
}
.bar {
width: 160px;
}
@media (max-width: 768px) {
.foo {
width: 576px;
}
.bar {
width: 384px;
}
}npm i css-mqpacker-webpack-plugin --save-dev
# or
yarn add css-mqpacker-webpack-plugin -Dwebpack.config.js
const CssMqpackerPlugin = require('css-mqpacker-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin(),
],
},
};Type: String|RegExp|Array<String|RegExp> Default: /\.css(\?.*)?$/i
Test to match files against.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
test: /\.foo\.css$/i,
}),
],
},
};Type: String|RegExp|Array<String|RegExp> Default: undefined
Files to include.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
include: /\/includes/,
}),
],
},
};Type: String|RegExp|Array<String|RegExp> Default: undefined
Files to exclude.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
exclude: /\/excludes/,
}),
],
},
};Type: Boolean|Function Default: false
By default, CSS MQPacker pack and order media queries as they are defined (the “first win” algorithm). If you want to sort media queries automatically, pass sort: true.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
sort: true,
}),
],
},
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent