如何在“/dist/”文件夹中创建多输出文件夹 - Webpack答案

【问题标题】：How I can create multi ouput folders into the "/dist/" folder - Webpack如何在“/dist/”文件夹中创建多输出文件夹 - Webpack
【发布时间】：2019-02-20 20:09:15
【问题描述】：

在目标目录（/dist/）中，我想创建三个目录，分别是 IMAGES 文件夹、CSS 文件夹、JS 文件夹、类似于以下屏幕截图的多输出目录：

我当前的条目看起来像这样：

我的webpack.config.js 看起来像这样（这段代码有效，但它没有创建我想要的结构）：

                var path = require("path");
            const webpack = require('webpack');
            const ExtractTextPlugin = require("extract-text-webpack-plugin");
            const FileManagerPlugin = require('filemanager-webpack-plugin');
            const extractCSS = new ExtractTextPlugin("css/[name]-1.0.0.css");
            const extractSASS = new ExtractTextPlugin("es/[name].css");
            module.exports = function(env) {
            var isProd = false;
            if (env != null && env.production) {
                isProd = true;
            }
            var jsDev = "./js/[name]-bundle.js";
            var jsProd = "./js/[name]-" + date_string() + ".js";
            var configJs = isProd ? jsProd : jsDev;
            return {
                context: path.resolve(__dirname, "src"),
                entry: {
                    specials: './js/specials.js',
                    checkout: './js/checkout.js',
                    mobile: './js/mobile.js',
                    screen: './js/screen.js',
                    custom: './js/app.js'
                },
                output: {
                    path: path.join(__dirname, "dist"),
                    filename: configJs
                },
                module: {
                    rules: [{
                        test: /\.css$/,
                        use: extractCSS.extract({
                            fallback: "style-loader",
                            use: "css-loader"
                        })
                    }, {
                        test: /\.scss$/,
                        use: extractSASS.extract({
                            fallback: "style-loader",
                            use: ["css-loader", "sass-loader"]
                        })
                    }, {
                        test: /\.(jpg|svg|png|gif)$/,
                        exclude: /fonts/,
                        loaders: [{
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: './images/',
                                publicPath: ''
                            }
                        }]
                    }, {
                        test: /\.(eot|svg|ttf|woff|woff2)$/,
                        exclude: /images/,
                        loader: 'file-loader',
                        options: {
                            name: 'fonts/[name].[ext]',
                            publicPath: ''
                        }
                    }]
                },
                plugins: [
                    extractSASS
                ]
            };

任何帮助将不胜感激，

谢谢，

【问题讨论】：

源目录的结构是什么？您是否只需要将相同的输入文件复制到三个目标目录中的每一个中？
条目将是 entry: { specials: './js/specials.js', checkout: './js/checkout.js', mobile: './js/mobile.js' ，屏幕：'./js/screen.js'，自定义：'./js/app.js' }
你的代码中已经有了。请回答我的两个问题，以便我们更轻松地为您提供帮助。
我添加了带有条目“SRC”的新屏幕截图，该条目应创建具有三个目标目录的输出“dist”。谢谢你的帮助；）
每个 dist 位置需要哪些源文件？我不明白你的预期过程。

标签： javascript webpack output

【解决方案1】：

关注这部分配置：

var jsDev = "./js/[name]-bundle.js";
var jsProd = "./js/[name]-" + date_string() + ".js";

var configJs = isProd ? jsProd : jsDev;

output: {
  path: path.join(__dirname, "dist"),
  filename: configJs
},

如果你把 jsDev 和 jsProd 改成这样：

var jsDev = "./[name]/[name]-bundle.js";
var jsProd = "./[name]/[name]-" + date_string() + ".js";

webpack 将使用您的条目名称（特价、结帐等）创建文件夹。

如果你想要更高级的方法，你可以查看 webpack 文档的这一部分：https://webpack.js.org/configuration/output/#output-filename，

尤其是部分：

使用函数返回文件名：

module.exports = {
  //...
  output: {
    filename: (chunkData) => {
      return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
    },
  }
};

您可能还想查看一些资源：

https://hackernoon.com/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065

https://www.npmjs.com/package/webpack-entry-plus

https://www.npmjs.com/package/multiple-bundles-webpack-plugin

【讨论】：