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

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

当前回答

我写了一个插件，希望可以做你想要的，你可以指定已知或未知的入口点(使用glob)，并指定准确的输出或使用入口文件路径和名称动态生成它们。https://www.npmjs.com/package/webpack-entry-plus

2017-11-30 17:53:50

其他回答

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

2016-03-10 01:36:20

Webpack支持多条输出路径。

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

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

2017-07-24 11:03:40

2017-11-30 17:53:50

我的情况是这样的

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

2021-03-03 18:53:11

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

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

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

推荐文章

最新文章

标签