如何使用 webpack 输出多个文件夹？答案

【问题标题】：How can I output multiple folders with webpack?如何使用 webpack 输出多个文件夹？
【发布时间】：2015-03-08 20:55:39
【问题描述】：

我的 JS 模块有一个文件夹结构。我想要每页一个模块。这不是单页应用。

如何以文件夹结构输出文件？

据我所知，唯一的可能是输出[name].js。如果我使名称非常独特，或者我可以使名称具有- 作为文件夹分隔符，这可能会起作用。这意味着a/b/c.js 将转换为名称a-b-c。我真的不喜欢这个。我希望能够require("a/b/c")。

据我所知，我也不能使用单个捆绑文件，因为 require 在模块之外不可用。如果是这样，我可以只在每个页面上构建一个包和require("a/b/c")。

如果有我在互联网上找不到的好方法，请告诉我。

看起来我可以使用 r.js 通过 require.js 轻松完成此操作，但我不想使用 require.js 并且想要 CommonJS 模块。

【问题讨论】：

我正在做类似的事情，但不完全相同。在我的webpack.config.js 中，我创建了几个不同的配置，我根据运行不同npm 脚本时设置的 NODE_ENV 环境变量在它们之间切换。例如，在我的package.json 中，我有一个名为build-dev 的脚本，它运行"set NODE_ENV=development&& webpack"。希望这能给你一些想法！

标签： javascript gruntjs webpack

【解决方案1】：

您也可以使用 [name] 创建新文件夹。像这样：

output: {
    path: __dirname,
    filename: '[name]/[name].js',
    chunkFilename: '[name].js',
    publicPath: '/assets/'
},

【讨论】：

【解决方案2】：

您可以使用斜杠定义入口点，如下所示：

entry: {
    "main-plugin/js/background":"./src/main-plugin/background"
}

和output 这样：

output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js'
},

此设置将创建一个public/main-plugin/js 文件夹并将background.js 放入其中。它至少适用于Win7x64。

【讨论】：

【解决方案3】：

通过与节点的一些争论，您可以创建一个entry 对象来传递配置。就我而言，我使用二级文件夹的名称来创建不同的捆绑包，但您可以轻松适应您的需求。

const path = require('path');
var glob = require('glob')

const exportPath = path.resolve(__dirname,`./../public/javascripts/plugins`);

// create a glob of files
const entryArray = glob.sync('./plugins/**/{svg,src}/**/*.*');

/**
 * Create a dictionary of entries in format: folder: ['file', 'file2']
 * https://webpack.js.org/configuration/entry-context/#entry
 */

var folders = []
var entries = {};

// list unique folders
entryArray.map((item) => {
  const folderName = item.split('/')[2];
  if (!folders.includes(folderName)) {
    folders.push(folderName);
  }
});

// assign files to each folder
folders.map((folder) => {
  var imports = [];
  entryArray.map((item) => {
    const folderName = item.split('/')[2];
    
    if (folder == folderName) {
      imports.push(item);
    }

  });

  entries[folder] = imports
});

module.exports = {
    entry: entries,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              query: {
                presets: [ '@babel/preset-env' ],
              },
            }
          ],
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('postcss-nested-ancestors'),
                  require('postcss-nested')
                ]
              }
            }
          ]
        },
        {
          test: /\.svg$/,
          loader: 'svg-inline-loader?removeSVGTagAttrs=false'
        }
    ],
  },
  output: {
    path: exportPath,
    filename: '[name]/dist/bundle.js',
    libraryTarget: 'umd',
    libraryExport: 'default'
  }
};

【讨论】：