Question

如何保留文件夹结构和文件名？

通配符**/*.js的保留很重要。我想保持动态，而不是手动添加新组件。

文件夹结构

|-- src
    |-- components
        |-- lightbox
            |-- index.js
        |-- carousel
            |-- index.js
        |-- modal
            |-- index.js

预期的文件夹和文件输出：
文件夹结构和原始文件名应保留！

|-- build
    |-- components
        |-- lightbox
            |-- index.js
        |-- carousel
            |-- index.js
        |-- modal
            |-- index.js

使用当前的webpack配置，我得到以下结果：
所有组件都被放到一个.js文件中，应该不。

|-- build
    |-- components
        |-- main.js

我的webpack配置

entry: $.glob.sync('./src/components/**/*.js'),
mode: 'development',
output: {
  filename: '[name].js'
},
module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    }
  }]
}

Answer 1

spring doc指出：

请注意，此选项称为文件名，但仍然可以使用“ js / [name] /bundle.js”之类的东西来创建文件夹结构。

因此，如果您的webpack的输出文件名是dirA/fileA，它将被输出到

|-- dist
    |-- dirA
         |-- fileA.js

但是您也要声明

保留通配符** / *。js很重要

我们可以利用以下事实：可以通过将对象传递到webpack的条目来命名文件。

我假设您正在使用节点的glob（$.glob.sync有点使我困惑），其输出是与全局模式匹配的路径数组。然后，我们只需要将此数组修改为具有以下格式的对象：

//from    
["./src/dirA/fileA.js", "./src/dirB/fileB.js"]
// to
{ 
  "dirA/fileA": "./src/dirA/fileA.js",
  "dirB/fileB": "./src/dirB/fileB.js",
}

这是一个简单的例子：

const glob = require('glob');

const entry = glob.sync('./src/**/*.js').reduce((entry, path) => {
  const pathName = path.replace(/(\.\/src\/|\.js)/g, ''); // remove `./src/`, `.js`
  entry[pathName] = path;
  return entry;
}, {});

module.exports = {
  mode: 'development',
  entry,
  output: {
    filename: '[name].js'
  }
}

为通配的条目文件创建动态命名的输出

1 个答案: