如何在 Webpack 配置中创建多个输出路径

Question

有谁知道如何在 webpack.config.js 文件中创建多个输出路径？我正在使用 bootstrap-sass ，它带有一些不同的字体文件等。为了让 webpack 处理这些文件，我已经包含了可以正常工作的文件加载器，但是它输出的文件是保存到我为其余文件指定的输出路径：

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

我想实现一些东西，我可以查看任何 webpack 正在输出的扩展类型以及以 .woff .eot 结尾的东西，等等，让它们转移到不同的输出路径。这可能吗？

我用谷歌搜索了一下，在 github 上遇到了这个*问题，其中提供了几个解决方案，编辑：

但看起来您需要知道入口点才能使用散列方法指定输出例如：

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

*https://github.com/webpack/webpack/issues/1189

但是在我的例子中，就字体文件而言，输入过程有点抽象，我只知道输出。在我的其他文件进行转换的情况下，有一个已知点，我要求它们由我的加载器处理。如果有办法找出这一步发生的位置，我可以使用散列方法自定义输出路径，但我不知道这些文件在哪里需要。

Answer 1

你只能有一个输出路径。

来自文档 https://github.com/webpack/docs/wiki/configuration#output

Options affecting the output of the compilation. output options tell Webpack how to write the compiled files to disk. Note, that while there can be multiple entry points, only one output configuration is specified.

If you use any hashing ([hash] or [chunkhash]) make sure to have a consistent ordering of modules. Use the OccurenceOrderPlugin or recordsPath.

Answer 2

我实际上只是进入文件加载器模块中的 index.js 并更改内容的发送位置。这可能不是最佳解决方案，但在有其他方法之前，这很好，因为我确切地知道这个加载程序正在处理什么，这只是字体。

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;

Answer 3

我不确定我们是否遇到同样的问题，因为截至 2016 年 6 月，webpack 仅支持每个配置一个输出。我猜你已经看到了 issue on Github.

但是我使用multi-compiler分隔输出路径。（即分离 webpack.config.js 的配置对象）。

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

如果它们之间有共同的配置，你可以使用 extend 库或 ES6 中的 Object.assign 或 ES7 中的 {...} 扩展运算符。

Answer 4

如果您可以接受具有相同深度和文件夹结构的多个输出路径，则可以在 webpack 2 中执行此操作（尚未使用 webpack 1.x 进行测试）

基本上您不遵循文档规则，而是为文件名提供路径。

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

这将采用此文件夹结构

/-
  foo.js
  bar.js

然后变成

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

Answer 5

Webpack 确实支持多个输出路径。

设置输出路径为入口键。并使用 name 作为输出模板。

webpack 配置：

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

生成：

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Answer 6

我写了一个插件，希望可以做你想做的事，你可以指定已知或未知的入口点（使用glob) and specify exact outputs or dynamically generate them using the entry file path and name. https://www.npmjs.com/package/webpack-entry-plus

Answer 7

您绝对可以从 webpack.config 文件中获得 return 组配置。但如果您只想将工件的副本放在项目文档的文件夹中，这不是最佳解决方案，因为它会使 webpack 构建您的代码两倍，从而使总体构建时间加倍。

在这种情况下，我建议改用 FileManagerWebpackPlugin 插件：

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

Answer 8

如果在所有答案之后还不明显，您还可以输出到完全不同的目录（例如标准 dist 文件夹之外的目录）。您可以通过使用根作为路径（因为您只有一个路径）并将路径的完整“目录部分”移动到 entry 选项（因为您可以有多个条目）来做到这一点：

entry: {
  'dist/main': './src/index.js',
  'docs/main': './src/index.js'
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, './'),
}

此配置会导致创建 ./dist/main.js 和 ./docs/main.js。

Answer 9

您现在可以（从 Webpack v5.0.0 开始）使用新的“描述符”语法为每个条目指定唯一的输出路径 (https://webpack.js.org/configuration/entry-context/#entry-descriptor) –

module.exports = {
  entry: {
    home: { import: './home.js', filename: 'unique/path/1/[name][ext]' },
    about: { import: './about.js', filename: 'unique/path/2/[name][ext]' }
  }
};

Answer 10

请不要使用任何解决方法，因为它会影响构建性能。

Webpack 文件管理器插件

易于安装将此标签复制到 webpack.config.js

之上

const FileManagerPlugin = require('filemanager-webpack-plugin');

安装

npm install filemanager-webpack-plugin --save-dev

添加插件

module.exports = {
    plugins: [
        new FileManagerPlugin({
            onEnd: {
                copy: [
                    {source: 'www', destination: './vinod test 1/'},
                    {source: 'www', destination: './vinod testing 2/'},
                    {source: 'www', destination: './vinod testing 3/'},
                ],
            },
        }),
    ],
};

截图

Answer 11

问题已经存在于语言中：

entry（这是一个对象 (key/value)，用于定义输入*）
output（这是一个对象（key/value），用于定义输出*）

根据像“[name]”这样的有限占位符来区分输出的想法定义了限制。

我喜欢 webpack 的核心功能，但是使用需要重写基于逻辑和简单性的抽象定义...软件开发中最难的事情...逻辑和简单性。

所有这些都可以通过提供 input/output 定义的列表来解决...一个列表 INPUT/OUTPUT 定义。

好的解决方法是：

module.exports = {
   plugins: [
    new FileManagerPlugin({
      events: {
        onEnd: {
          copy: [
            {source: 'www', destination: './vinod test 1/'},
            {source: 'www', destination: './vinod testing 2/'},
            {source: 'www', destination: './vinod testing 3/'},
          ],
        },
      }
    }),
  ],
};

Answer 12

你可以做到

var config = {
    // TODO: Add common Configuration
    module: {},
};

var x= Object.assign({}, config, {
    name: "x",
    entry: "./public/x/js/x.js",
    output: {
       path: __dirname+"/public/x/jsbuild",
       filename: "xbundle.js"
    },
});
var y= Object.assign({}, config, {
    name: "y",
    entry: "./public/y/js/FBRscript.js",
    output: {
       path: __dirname+"/public/fbr/jsbuild",
       filename: "ybundle.js"
    },
});

let list=[x,y];

for(item of list){
    module.exports =item;
}

Answer 13

在我的例子中，我遇到了这种情况

const config = {
    entry: {
    moduleA: './modules/moduleA/index.js',
    moduleB: './modules/moduleB/index.js',
    moduleC: './modules/moduleB/v1/index.js',
    moduleC: './modules/moduleB/v2/index.js',
  },
}

我是这样解决的(webpack4)

const config = {
entry: {
        moduleA: './modules/moduleA/index.js',
        moduleB: './modules/moduleB/index.js',
        'moduleC/v1/moduleC': './modules/moduleB/v1/index.js',
        'moduleC/v2/MoculeC': './modules/moduleB/v2/index.js',
      },
    }

如何在 Webpack 配置中创建多个输出路径

How to create multiple output paths in Webpack config

config

path

loader

output

webpack