此插件为叉 微型 cs- 提取插件 但是,有支持 网络包装RTLPlugin。也就是说,它允许根据页面当前方向加载Async CSS文件。 请检查access-date=中的日期值 (帮助) 已提及软件包学习如何使用.
npm install --save-dev mini-css-extract-plugin-with-rtl
使用量
配置
网络包装. config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin-with-rtl");
const WebpackRTLPlugin = require("webpack-rtl-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
rtlEnabled: true,
// Global variable (e.g., `window.pageDir`) whose value determines whether to load the LTR or
// RTL version of a CSS chunk at runtime. Value should be either `"ltr"` or `"rtl"`. If the
// `rtlGlobalVar` option is not specified, we check `document.dir` by default.
rtlGlobalVar: 'pageDir'
}),
new WebpackRTLPlugin() // You must not pass filename option
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
};
贷项
最初由Maxim Valenko创建为 bershanoe/mini-cs-extract-plugin- with-trtl (英语)。自动更新插件以使用最新 mini-css-extract-plugin 上游版本,重组承诺结构,使叉子更容易维护,并增加了对 data-webpack 属性 <link> 插入到 HTML 正文中的标记.
原文 mini-css-extract-plugin 从这里开始读取
微型 cs- 提取插件
此插件将 CSS 提取到单独的文件中 。 它每个JS文件创建一个CSS文件,包含CSS. 它支持CSS和SourceMaps的On-Demand-Loading.
它建立在一个新的webpack v4特性(模块类型)之上,需要webpack 4才能工作.
与取出-text-webpack-plugin相比:
- 同步装入
- 无重复汇编(性能)
- 便于使用
- CSS 专用软件
安装
npm install --save-dev mini-css-extract-plugin
使用量
配置
publicPath
类型 : String|Function
默认: publicPath 内 webpackOptions.output
指定目标文件的自定义公共路径.
最小示例
网络包装. config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
};
publicPath 函数示例
网络包装. config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
// publicPath is the relative path of the resource to the context
// e.g. for ./css/admin/main.css the publicPath will be ../../
// while for ./css/main.css the publicPath will be ../
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
'css-loader',
],
},
],
},
};
高级配置示例
此插件只应在 production 无 style-loader 在加载器链中,特别是如果您想要HMR development。 。 。 .
这里举出一个例子,可以把高血压和高血压都纳入 development 在文件中提取的样式 production 建设.
(Loaders选项留待明确,相应适应您的需要. )
网络包装. config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
};
热舱重装
提取-mini-cs-plugin支持在开发中热重装实际的cs文件. 提供了一些选项,使标准样式表和本地范围CSS或CSS模块的HMR成为可能. 下面是带CSS模块的用于HMR的小型cs的示例配置.
当我们尝试hmr css -模块。 在按照自定义块名进行代码共享时不容易执行 . reloadAll 只有在HMR不能正确工作的情况下,才能启用这个选项. cs-module的核心挑战在于,当代码分割时,与文件名相比,块代号可以并确实不同.
网络包装. config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader',
],
},
],
},
};
尽量减少用于生产
要最小化输出, 请使用一个插件, 如 优化-cs-assets-webpack-插件设置 optimization.minimizer 覆盖 Web 包提供的默认值, 所以要确保同时指定 JS 最小化 :
网络包装. config.js
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
特征
使用预装或内嵌 CSS
运行时代码检测器已经通过 <link> 或者说 <style> 标签.
在服务器侧插入CSS用于Server-Side-Rendering时,此功能可能有用.
这个 href 会 议 日 程 和 议 程 <link> 标记必须匹配用于装入 CSS 块的 URL .
这个 data-href 属性可用于 <link> 财务报告和审定财务报表 <style> 我也一样.
嵌入CSS时 data-href 必须使用.
在一个文件中提取全部 CSS
类似什么 取出文本- 网包- 插件 已经,CSS
可用 CSS 文件提取 optimization.splitChunks.cacheGroups。 。 。 .
网络包装. config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
根据条目提取 CSS
您也可以根据 Webpack 条目名提取 CSS 。 如果您动态导入路径, 这尤其有用 但希望你的CSS能按条目排列 这还防止了CSS重复问题 提取 TextPlugin .
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
模块文件名选项
与 moduleFilename 选项可以使用块数据自定义文件名。 这对于处理多个切入点和希望从文件名中获取对某个切入点/切入点的更多控制特别有用。 在下面的例子中,我们将使用 moduleFilename 将生成的 css 输出到不同的目录.
const miniCssExtractPlugin = new MiniCssExtractPlugin({
moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
});
长期缓存
长期缓存用途 filename: "[contenthash].css"可选添加 [name]。 。 。 .
删除顺序警告
对于通过一致使用范围界定或命名公约来减轻cs命令的项目,cs命令警告可以通过为插件设置被忽略的命令旗来禁用.
new MiniCssExtractPlugin({
ignoreOrder: true,
}),
媒体查询插件
如果您想从提取的 CSS 中提取媒体查询( 因此移动用户不再需要装入桌面或平板电脑特定 CSS), 您应该使用以下插件之一 :