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

217

Web_Fer

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

任何帮助将不胜感激，

谢谢，

咳嗽

专注于配置的这一部分：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。