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

Question

在目标目录 (/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
                ]
            };

任何帮助将不胜感激，

谢谢，

Answer 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