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 文件是多余的。

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

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

我的第一个想法是不使用 mini-css-extract-plugin 来动态导入 scss，但这会在 js 中包含很多基于 css 的东西 (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/255)。

Answer 1

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

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

行为是：

1. 使用 Event Hook Plugin 并在 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);
                       });
               }
       })
   ]