webpack - 无法在 Webpack 中输出动态 SCSS 入口点
问题描述
我正在使用 Webpack 4,我正在尝试查看一个文件夹以查找所有 scss 文件并为找到的每个文件动态创建一个入口点。当我看到函数正在返回时,它似乎正在返回我需要的内容,但没有从函数输出 css 文件,只有第一个入口点备用:
我不明白我做错了什么。谢谢你提供的所有帮助。
const departmentStyles = pattern => glob
.sync(pattern)
.reduce((entries, filename) => {
const [, name] = filename.match(/([^/]+)\.scss$/)
return { ...entries, [name]: filename }
}, {})
console.log('Departments', departmentStyles('./src/scss/alternate/departments/*.scss'))
When I log out the return value of department style I receive:
/*
Departments { alt1: './src/scss/alternate/departments/alt1.scss',
alt2: './src/scss/alternate/departments/alt2.scss',
alt: './src/scss/alternate/departments/alt3.scss', }
*/
module.exports = {
entry: {
...departmentStyles('./scss/alternate/departments/*.scss'),
},
output: {
path: path.join(__dist, 'alternate'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js',
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].css'
})
]
}
解决方案
经过多次反复试验,我找到了解决方案。我首先修改了检索文件的方式,然后将对象添加到 webpack 入口点
const entryObject = {}
// For each file in the glob
departments.forEach(file => {
// Will return just the file name without extension
const name = file.match(/(?<=\/departments\/)(.*)(?=.*\.scss)/g)
// Replace ./src with ./ so the path will resolve on build
file = file.replace('./src/', './')
// Build the entry object
entryObject[name] = file
})
// 上面创建了一个入口对象:name: 'filepath/file.css'
然后在我的入口点,我只需添加 entryObject
module.exports = {
entry: {
tri: './js/tri.js',
entryObject
}
/* Rest of the webpack stuff */
}
推荐阅读
- sql - 如何使用触发器减少 APEX 上的计数和计算以确保计数不低于 0
- android - 意图不适用于图像按钮吗?
- python - 查找与字典中相似的单词的库
- jquery - 如何使用 jQuery 使图像成为指向它自己的源的链接?
- angular - Ag Grid + 如何使特定行中的特定列可动态编辑或不可编辑
- python - 如何动态查找数字分量,如以下 PCA 的 Matlab 代码中给出的?
- java - 如何在 jpa 存储库自定义方法上应用搜索条件(规范)?
- solr - 我如何查询 Solr 以获得具有更多相似性的文档的高分?
- wordpress - 显示“后端错误”的 Pagespeed 见解
- sql - postgres - 如何在联合更新查询中两次更新同一记录