Question

我正在使用Webpack 4，并且试图在一个文件夹中查找所有的scss文件，并为找到的每个动态创建一个入口点。当我看到函数正在返回时，它似乎恰好返回了我需要的东西，但是从函数没有输出任何css文件，对于第一个入口点tri只有一个：

我使用的示例来自https://www.sitepoint.com/community/t/how-to-configure-webpack-to-output-multiple-css-files-from-sass/303659/2

我不明白我在做什么错。感谢您提供的任何帮助。

const departmentStyles = pattern => glob
  .sync(pattern)
  .reduce((entries, filename) => {
    const [, name] = filename.match(/([^/]+)\.scss$/)
    return { ...entries, [name]: filename }
  }, {})

console.log('Departments', departmentStyles('./src/scss/tri/departments/*.scss'))

When I log out the return value of department style I recieve:
/*
Departments { art: './src/scss/tri/departments/art.scss',
  business: './src/scss/tri/departments/business.scss',
  health: './src/scss/tri/departments/health.scss',
  law: './src/scss/tri/departments/law.scss',
  supply: './src/scss/tri/departments/supply.scss',
  tech: './src/scss/tri/departments/tech.scss' }
*/


module.exports = {
  entry: {
    tri: './js/tri.js',
    ...departmentStyles('./scss/tri/departments/*.scss'),
  },

  output: {
    path: path.join(__dist, 'tri'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css'
   })
  ]
}

Answer 1

您还需要在插件部分添加MiniCssExtractPlugin

 plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css"
    })
  ]

Answer 2

经过反复尝试，我找到了解决方案。我已经修改了我首先检索文件然后将对象添加到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 */
}

无法在Webpack中输出动态SCSS入口点

2 个答案: