Question

我有一个ASP.Net MVC应用程序，试图在其中每页显示一个样式表和javascript文件。不出所料，不同的页面将共享很多代码，尤其是样式。我们使用Sass进行样式设置，而我正在尝试使Webpack在共享代码上进行重复数据删除/拆分。我也正在使用mini-css-extract-plugin，我认为这可能是我的问题的一部分，但我离题了。我的路径结构是这样的：

/资产
-/ js
-/样式
-/ bootstrap
-/ mixins
-/页
--- /第1页
---- page1.scss
--- /第2页
---- page2.scss
-/实用工具
--_ 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中的所有内容基本上都会添加到每个文件的前面，从而使它们的大小为900k。

我尝试将这个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文件？

在此先感谢您的帮助。

无法使Webpack 4分割/分割Sass文件

0 个答案: