@JoyMefisto
Frontend developer

Webpack 2 Как сохранить иерархию (вложенность) файлов, после сборки проекта?

Добрый день!
Прошу помочь!

Что имеется:
Существует вложенная иерархия папок. В dev/views/ лежат файлы, которые после компилиции переносятся в prod/compiled/
c631dd314fc64e3283f9223d0255f038.png

Проблема в том, что вложенный head после компиляции выносится как отдельная папка(да, потому что точка входа указана отдельно). А я хочу чтобы после сборки проекта, сохранялась иерархия папок.

Для webpack'a точкой входа являются файлы с расширение *.js в него же подключается рядом лежащий pcss(который после postcss становится css).
038ee1937d124ab38f7b759b7dba7cee.png

Весь webpack.config.js
const path = require('path');
const webpack = require('webpack');

const merge = require('webpack-merge');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const AssetsPlugin = require('assets-webpack-plugin');

const js = require('./webpack/rules.js');
const cssBottom = require('./webpack/rules.plugin.css.bottom');
const cssTop = require('./webpack/rules.plugin.css.top');

const cssBottomHash = require('./webpack/rules.plugin.css.bottom.hash');
const cssTopHash = require('./webpack/rules.plugin.css.top.hash');

const images = require('./webpack/plugin.images');
const uglifyJs = require('./webpack/plugin.uglify');
const define = require('./webpack/plugin.define');


const PATHS = {
    common: path.resolve(__dirname, 'dev/common'),
    view: path.resolve(__dirname, 'dev/views'),
    prod: path.resolve(__dirname, 'prod')
};

let NODE_ENV = 'development';

const config = merge([
    {
        entry: {
            common: PATHS.common + '/common.js',
            main: PATHS.view + '/main/main.js',
            about: PATHS.view + '/about/about.js',
            contact: PATHS.view + '/contact/contact.js',
            head: PATHS.view + '/about/head/head.js',
        },

        output: {
            path: PATHS.prod + '/compiled',
            publicPath: '',
            chunkFilename: '[name]/[id].[chunkhash].js',
            filename: '[name]/[name].js',

            /**
             * Полволяет получить доступ к модулю из глобальной области видимости
             */
            library: '[name]'
        },

        plugins: [
            /**
             * В случае ошибки точки входа, не генерировать файлы сборки
             */
            new webpack.NoEmitOnErrorsPlugin(),


            /**
             * common.js - набор повторяемых подключаемых модулей из точек входа
             */
            new webpack.optimize.CommonsChunkPlugin({
                name: "common",
                minChunks: 2
            }),

            /**
             * Плагин генерирует .json с версиями файлов
             */
            new AssetsPlugin({
                filename: 'assets.json',
                path: PATHS.prod + '/compiled/'
            }),


        ],

        resolve: {
            extensions: ['*', '.css', '.pcss', '.js', '.json'],
            modules: ["node_modules"]
        },

        /**
         * Предупреждение о весе файлов
         */
        performance: {
            hints: false
        },
        /**
         * #eval or eval-source-map for development
         * #cheap-module-source-map for production
         */
        devtool: NODE_ENV == 'development' ? '#eval-source-map' : '#cheap-module-source-map'
    }
]);

// Вынесенные модули 
module.exports = function(env) {
    NODE_ENV = env || 'development';

    if(env === 'development') {
        return [
            merge([
                config,
                define(),
                js(),
                images(),

                cssTop(),
            ]),
            merge([
                config,
                define(),
                js(),
                images(),

                cssBottom(),
            ])
        ]
    }

};


// Модуль js()
module.exports = function() {
    return {
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                }
            ]
        }
    }
};


// Модуль cssTop()
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function (paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader!autoprefixer?browsers=last 2 version',
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader?importLoaders=1', 'postcss-loader'],

                    })
                },

                {
                    test: /\.pcss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            'css-loader',
                            {
                                loader: 'postcss-loader',
                                options: {
                                    plugins: [
                                        require('precss')(),
                                        require('postcss-bgimage')({mode: 'cutter'}),
                                        require('postcss-short')({}),
                                        require('postcss-import')({}),
                                        require('postcss-cssnext')({
                                            browsers: ['last 2 versions', '> 5%'],
                                        }),
                                        require('cssnano')({})
                                    ]
                                }
                            }
                        ]
                    })
                }

            ]
        },
        plugins: [
            /**
             * Вынос стилей в отдельный файл
             */
            new ExtractTextPlugin({
                filename: './[name]/[name].top.css',
                allChunks: true
            })
        ]
    }
};

Остальные модули не так важны.

Натыкался на такой ишью, но он для первого webpack'a.
Вложенность может быть и трёх и четырёх уровневая. Как добиться сохранения вложенности при сборке файлов??
Прошу помочь!
  • Вопрос задан
  • 1050 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы