我如何为我的 gutenberg 块设置webpack来提取多个css文件,并根据样式表的名称捆绑这些文件。
Zack Gordon在Webpack 3中使用了Extract Text Plugin,这很好用。但是在Webpack 4中我不得不切换到mini-css-extract-plugin,在这个插件中我不能再让这个插件工作了。
请看下面我的当前设置,这样你就可以看到我正在尝试做什么。
这是我的项目文件夹:
Plugin folder
|-- [src]
| |-- [block1]
| | |-- block1.js
| | |-- style.scss
| | `-- editor.scss
| |-- [block2]
| | |-- block2.js
| | |-- style.scss
| | `-- editor.scss
| `-- index.js
`-- [build]
|-- index.js
|-- style.build.css
`-- editor.build.css
在block1.js/block2.js中:
import './style.scss'
import './editor.scss'
在index.js中:
import './block1'
import './block2'
在webpack.config.js中:
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...defaultConfig,
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
style: {
name: 'style',
test: /style\.s?css$/,
chunks: 'all',
enforce: true,
},
editor: {
name: 'editor',
test: /editor\.s?css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin({
filename: 'blocks.[name].build.css'
}),
],
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
},
]
},
};
预期输出:
[build]
|-- blocks.editor.build.css
|-- index.js
|-- blocks.style.build.css
电流输出:
[build]
|-- blocks.editor.build.css
|-- editor.js
|-- index.js
|-- blocks.style.build.css
|-- style.js
`-- (...and indentical map files)
当前的设置会产生两个我不需要的额外的js文件(style.js/editor.js),但最大的问题是,它也会导致块无法在WordPress中加载。当我不使用splitChunks时,它会加载,但所有的css都捆绑在一个文件中...我需要两个。
正在比较:没有splitChunks的index.js:
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
具有分割区块的index.js:
/******/ // add entry module to deferred list
/******/ deferredModules.push(["./src/index.js","editor","style"]);
/******/ // run deferred modules when ready
/******/ return checkDeferredModules();
/******/ })
3条答案
按热度按时间wz1wpwve1#
看到我的评论,改变了我的设置,现在它的工作:(好吧,它不再是一个单一的条目,但嘿:-)
项目文件夹:
在css.js中:
在webpack.config.js中:
输出生成文件夹:
bttbmeg02#
实际上,您不需要多个条目。使用当前解决方案中的配置,您只缺少一个选项来使其按您希望的方式工作。
filename
选项必须在块名称的基础上动态设置。这将为每个块创建一个
.css
文件。由于您已经有了style
和editor
块,它将创建style.css
和“editor.css”,每个块都有相应的css或scss导入到js文件中。检查文件
它看起来像这样,唯一的增加是
filename
对MiniCssExtractPlugin
选项的更改,以及css条目的删除。vfh0ocws3#
应用发布的答案,我设计了一个配置,允许包scss文件共享相同的名称,并将它们分组在
<name>.css
中,其余的分组在styles.css
中。我在配置文件的开头定义了一个数组,其中包含所有CSS块名称组。
在Bornie和Raba帖子中,我定义了一个新条目,允许使用名称“main”作为块名。
每个CSS群组的属性都会在cacheGroups设定中解构。
要完成添加插件
MiniCssExtractPlugin
和配置filename
以分配块名称,并将默认块名称重命名为style
,例如以指定的名称生成文件。它看起来像这样