使用webpack生成静态CSS文件

2023年4月28日 218次阅读

我目前正在开发一个使用不同前端主题的应用程序.这些主题只是CSS文件,可由用户选择.

从技术上讲,这些主题是.scss文件,它们由webpack编译并通过angular中的标准link-tag加载：

< link rel =“stylesheet”,ng-href =“themes / {{theme}}.css”>

我剥离的webpack配置如下所示：

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),     
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),     

module.exports = new WebpackConfig().merge({

entry: {
    app: [
        './app/main.ts',
        './assets/sass/themes/theme-1.scss',
        './assets/sass/themes/theme-2.scss'
    ],
},

output: {
    path: "build/",
    filename: "[name].bundle.js",
    publicPath: "/build/"
},

plugins: [
    theme1CssExtractor,
    theme2CssExtractor,
],

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        [
            {
                test: /theme-1\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme1CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            },
            {
                test: /theme-2\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme2CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            }
        ]
    ]
}

这完全正常,直到我想使用启用了热模块替换(HMR)功能的webpack-dev-server,因为extractTextPlugin不支持HMR.当我简单地禁用extractTextPlugin(options.disable)或删除它们时,所有主题都被编译到主模块中,这个 – 来源 – 打破主题,因为所有主题都应用在一起.

如何在不使用extractTextPlugin的情况下直接使用webpack生成这些CSS文件？我尝试了不同的enntries / chunk,文件加载器的各种尝试……但没有什么真正有效.

它应该很简单：从SCSS-Files生成静态CSS文件,而不使用ExtractTextPlugin将它们转换为JS文件.

如果有人能指出我正确的方向,那就太好了.

最佳答案 一种方法可能是以尊重不同模式的方式组织Webpack配置：

>开发：不要使用ExtractTextPlugin(稍后会看到包含所有内容的文件的问题)
>生产：像现在一样使用ExtractTextPlugin

您可以看看它在este中是如何完成的.

关于没有ExtractTextPlugin(一个包含所有主题的文件)的问题：它发生是因为你的配置包含theme-1.scss和theme-2.scss作为’app’块中的入口点,所以Webpack将它们放在一起(一块).您可以尝试另一种方式：从入口点列表中排除它们,并在源代码中添加如下内容：

require('../assets/sass/themes/' + theme + '.scss');

在这种情况下,在开发模式下,您将只获得一个模块(主题),具体取决于变量“theme”的值.在生产模式下,Webpack将遍历’assets / sass / themes /’中的所有文件(‘require’包含表达式时的特定Webpack行为),包括它们作为模块,然后ExtractTextPlugin将处理它们的提取(所以你没有在这做任何事情).

关于如何在生产中加载特定主题有一些棘手的部分(因为代码中的“require”将无法执行任何操作,ExtractTextPlugin将使相应的模块保持空白),因此您必须添加一些添加 你的HTML.同时,不应在开发模式下调用此代码.一个可以帮助实现它的肮脏黑客：

if (!__DEV__) {
  // do adding <link> to the <head>
}

(另请参阅este示例,如何使用DefinePlugin定义__DEV__变量).

我真的很好奇如何以更好的方式解决它……

点赞