如何在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

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

将输出路径设置为输入键.并使用nameas输出模板.

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 2

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

但我通过使用多编译器分离输出路径.(即分离配置对象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,       
];

如果您在它们之间有共同配置,则可以使用扩展库或Object.assignES6中的ES6或{...}扩展运算符.

Answer 3

您现在可以（从 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 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

就我而言，我遇到了这种情况

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',
      },
    }

Answer 6

如果在所有答案之后并不明显，您还可以输出到完全不同的目录（例如标准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 7

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

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

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

Answer 8

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

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

截屏