webpack用css/scss文件生成js文件

Question

描述

在 webpack 中我使用mini-css-extract-plugin：

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[hash].css',
    chunkFilename: '[name].[hash].css',
  })
]

加载块文件中的 scss 文件：

{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, options: {
        hmr: isdev,
        reloadAll: true
      }
    },
    "css-loader",
    "sass-loader",
  ]
}

当我使用动态导入加载 scss 时：

import(/* webpackChunkName: "test" */ 'test.scss')

它将生成一个包含样式的test.[hash].css和一个test.[hash].js：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[15],{

/***/ 81:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);

问题

我想最大限度地减少延迟和加载的文件，因此我发现拥有几乎空的test.[hash].js文件是多余的。

您是否有办法将 scss 包含在 js 文件中（参见想法 1）或不发出/使用几乎空的 js 文件？

想法1：不使用mini-css-extract-plugin

我的第一个想法不是使用 mini-css-extract-plugin 来动态导入 scss，但这将在 js 中包含很多基于 css 的内容（https://github.com/webpack-contrib/extract-text-webpack-插件/问题/255）。

Answer 1

这是您可能感兴趣的代码摘录。它是在这里实时编码的，所以可能存在一些我不知道的错误。

我使用另一种方式，但在我自己的项目附近。

行为是：

1. 使用 Event Hook 插件并在 webpack 完成时调用它
2. 循环遍历每个文件
3. 如果文件是 css 并且与 js 扩展名相同

4. 然后删除js文件

   const EventHooksPlugin = require('event-hooks-webpack-plugin');
   const path             = require('path');
   const fs               = require('fs');
   const _                = require('underscore');
   
   plugins: [
       new EventHooksPlugin({
               done: () => {
                       const publicDir = __dirname + '/public';
                       const files     = fs.readdirSync(publicDir);
   
                       _.each(files, file => {
                             if (path.extname(file) !== '.css') { return ;}
   
                             const fileJs = file.replace('.css', '.js');
   
                             if (!fs.existsSync(fileJs)) {return;}
   
                             fs.unlinkSync(fileJs);
                       });
               }
       })
   ]