Webpack中是否可以将导入的CSS提取到多个文件中？

Question

这是我的文件夹结构：

src/yolo/block.js
src/yolo/editor.scss
src/yolo/style.scss

这是我的webpack.config.js的摘录

module.exports = {
  entry: glob.sync('src/**/block.js'),
  output: { path: 'dist' },
  plugins: [new MiniCssExtractPlugin()],
  ...
}

这是js文件的样子：

block.js

import './editor.scss'
import './style.scss'

我希望输出为：

dist/yolo/block.js -> es5
dist/yolo/editor.css
dist/yolo/style.css

但是我得到了：

dist/yolo/block.js
dist/yolo/block.css

Answer 1

Webpack在这里要做的是将所有CSS和JS依赖项编译为2个文件，因为它们是必需的/已导入block.js中。导入文件意味着您的代码需要它们，否则不使用Webpack打包将是错误的。

如果您希望Webpack在不同的文件中编译不同的CSS / JS，则必须创建另一个仅包含一个CSS文件的JS文件，并从block.js中删除相应的导入。