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

有人知道如何在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

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

当前回答

现在(从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]' }
  }
};

2020-08-15 13:52:12

其他回答

现在(从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]' }
  }
};

2020-08-15 13:52:12

如果所有的答案都不明显，你也可以输出到一个完全不同的目录(例如标准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被创建。

2020-07-27 17:44:48

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

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

截图

2020-09-03 23:17:11

问题已经在语言中了:

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

根据有限的占位符(如'[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/'},
          ],
        },
      }
    }),
  ],
};

2020-11-18 20:19:12

你当然可以从webpack中返回配置数组。配置文件。但如果你只是想在项目文档的文件夹中保存一份工件副本，这并不是一个最佳的解决方案，因为它会使webpack构建代码的时间增加两倍。

在这种情况下，我建议使用FileManagerWebpackPlugin插件:

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

2019-11-24 16:34:08

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

推荐文章

最新文章

标签