Динамическая конкатенация веб-пакетов на отдельные файлы - PullRequest
Новая
       5

Динамическая конкатенация веб-пакетов на отдельные файлы

0 голосов
/ 01 февраля 2019

Я пытаюсь объединить / скомпилировать мои файлы Javascript и scss в отдельные файлы и в разных местах, и я думаю, что мне чего-то не хватает, чтобы заставить его работать как нужно.

Я использую webpack4 иLaravel.

Вот моя структура ресурсов: 

resources/
    sass/
        Sites/
        app.scss
            Domain1/
                domain.scss
                Pages/
                    PageName/
                        page.scss
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        page.scss
resources/
    js/
        Sites/
            Domain1/
                app.js
                Pages/
                    PageName/
                        index.js
            Domain2/
                app.js
                Pages/
                    PageName/
                        index.js

И я хочу закончить с такой структурой css: 

resources/
    css/
        Sites/
            Domain1/
                Pages/
                    PageName/
                        main.css (contain app.scss + domain.scss + page.scss)
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        main.css

и для javascript: 

resources/
    js/
        Sites/
            Domain1/
                Pages/
                    PageName/
                        main.js (contain app.js + index.js)
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        main.js

С хорошим доменом / страницей javascript / scss файлом.Та же структура для scss и javascript.

, если следовать нескольким учебникам, документациям и т. Д., Но я не могу получить ожидаемый результат.Вот мой файл webpackconfig и мой объект ввода:

объект ввода: 

{
'css/Sites/Focus/Admin/Pages/Home': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Admin/domain.scss',
    './resources/sass/Sites/Focus/Admin/Pages/Home/page.scss'
],
'css/Sites/Focus/Admin/Pages/Routes': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Admin/domain.scss',
    './resources/sass/Sites/Focus/Admin/Pages/Routes/page.scss'
],
'css/Sites/Focus/Www/Pages/Home': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Www/domain.scss',
    './resources/sass/Sites/Focus/Www/Pages/Home/page.scss'
],
'js/Sites/Focus/Admin/Pages/Home': [
    './resources/js/Sites/Focus/Admin/app.js',
    './resources/js/Sites/Focus/Admin/Pages/Home/index.js'
],
'js/Sites/Focus/Admin/Pages/Routes': [
    './resources/js/Sites/Focus/Admin/app.js',
    './resources/js/Sites/Focus/Admin/Pages/Routes/index.js'
],
'js/Sites/Focus/Www/Pages/Home': [
    './resources/js/Sites/Focus/Www/app.js',
    './resources/js/Sites/Focus/Www/Pages/Home/index.js'
]

}

, а вот мой module.export: 

module.exports = {
entry:  finalEntriesObject,
output: {
    path: __dirname + '/public/',
    filename: '[name]/main.js'
},
module: {
    rules: [
        /**
         * Running Babel on JS files.
         */
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'public/[name]/main.css',
                    }
                },
                {
                    loader: 'extract-loader'
                },
                {
                    loader: 'css-loader?-url'
                },
                {
                    loader: 'postcss-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},

};

Объединение javascript работает отлично, и я в итоге получаю хорошую структуру, но я изо всех сил пытаюсь добиться того же с компиляцией / объединением scss.

Можете ли вы, ребята, помочьмне получить желаемую структуру?

...