Блог

У меня есть ASP.Net Приложение MVC, в котором я пытаюсь создать таблицу стилей и файл javascript на страницу. Как и следовало ожидать, разные страницы будут использовать много общего кода, особенно стилей. Мы использовали Sass для стилизации, и я пытаюсь заставить Webpack дедуплицировать / разбивать код на общий код. Я также использую мини-css-extract-plugin, который, как мне кажется, может быть частью моей проблемы, но я отвлекся. Моя структура пути как таковая:

/assets
-/ js
-/styles
-/bootstrap
-/mixins
-/pages
—/page1
—-page1.scss
—/page2
—-page2.scss
-/utilities
—_general.scss
—_mixins.scss
—_utilities.scss
—app.scss

Мой файл app.css выглядит следующим образом:

 @import "./utilities/colors";
@import '~bootstrap/scss/functions';
@import './bootstrap/variables';
@import '~bootstrap/scss/bootstrap';
@import './bootstrap/selector-overrides';
@import './general';
@import "./mixins";
@import './utilities';
  

Итак, в верхней части page1.scss и page2.scss я должен импортировать этот файл app.scss. Это приводит к тому, что практически все в app.scss добавляется к каждому файлу, в результате чего их размер достигает 900 кб.

Я попытался установить этот файл app.scss в качестве отдельной точки входа и удалить импорт, но тогда страницы не могут быть собраны, потому что у них нет доступа к этим значениям во время сборки.

Я пробовал несколько разных конфигураций конфигурации splitChunks, но безуспешно.

Это мой текущий файл webpack.config.ts:

 import * as path from 'path';
import * as webpack from 'webpack';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import * as ExtractCssChunks from 'extract-css-chunks-webpack-plugin';

const config: webpack.Configuration = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
      app: ['./assets/js/index.js'],
      page1: ['./assets/js/pages/page1.ts'],
      page2: ['./assets/js/pages/page2.ts']
    },
    module: {
        rules: [
        {
            test: /.ts$/,
            loader: 'awesome-typescript-loader'
        },
        {
            test: /.scss$/,
            use: [
                ExtractCssChunks.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'postcss-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        data: '$cloudinary_url: "";'
                    }
                }
            ]
        }
    ]
},
output: {
    chunkFilename: '[name].bundle.js',
    filename: '[name].bundle.js',
    library: 'LocalLib',
    path: path.resolve(__dirname, 'wwwroot', 'app')
},
optimization: {
    splitChunks: {
        chunks: 'all',
    }
},
plugins: [
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['**/*', path.join(process.cwd(), 'wwwroot/css/**/*')]
    }),
    new ExtractCssChunks({
        filename: "../css/[name].css",
        chunkFilename: "../css/[name].css"
    }),
    new webpack.EnvironmentPlugin({}),
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'window.jQuery': "jquery"
    })
],
resolve: {
    extensions: ['.js', '.ts'],
    alias: {
        jquery: "jquery/src/jquery"
    }
}

};

export default config;
  

В конечном счете, мой вопрос заключается в следующем: как мне выделить общие стили в отдельный файл, который я могу загружать и кэшировать отдельно от отдельных файлов страниц. Могу ли я что-то сделать в Webpack для достижения этой цели или мне нужно определенным образом изменить порядок моих файлов Sass?

Заранее благодарю вас за любую помощь.