如果所有的答案都不明显，你也可以输出到一个完全不同的目录(例如标准dist文件夹之外的目录)。你可以使用你的根路径作为路径(因为你只有一个路径)，并通过将路径的完整“目录部分”移动到入口选项(因为你可以有多个条目):

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被创建。

如果所有的答案都不明显，你也可以输出到一个完全不同的目录(例如标准dist文件夹之外的目录)。你可以使用你的根路径作为路径(因为你只有一个路径)，并通过将路径的完整“目录部分”移动到入口选项(因为你可以有多个条目):

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被创建。

如果你可以使用多个具有相同深度和文件夹结构的输出路径，在webpack 2中有一种方法可以做到这一点(尚未使用webpack 1.x进行测试)

基本上你不需要遵循doc规则，你需要为文件名提供一个路径。

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

请不要使用任何变通方法，因为这会影响构建性能。

Webpack文件管理器插件

将这个标签复制到webpack.config.js的顶部很容易安装

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

安装

NPM安装文件管理器-webpack-plugin

添加插件

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/'},
                ],
            },
        }),
    ],
};

截图

我只需要在文件加载器模块中进入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;

问题已经在语言中了:

条目(是一个对象(键/值)，用于定义输入*) 输出(是一个对象(键/值)，用于定义输出*)

根据有限的占位符(如'[name]')来区分输出的想法定义了限制。

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

所有这些问题都可以通过提供输入/输出定义列表来解决。输入/输出定义列表。

Vinod Kumar的好办法是:

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/'},
          ],
        },
      }
    }),
  ],
};