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.[哈希值].js文件没有必要。

你有办法要么将scss包含在js文件中（参见Idea 1），要么不发出/使用几乎空白的js文件吗？

Idea 1：不使用mini-css-extract-plugin

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

- Andreas Richter

---

可能是重复的问题，关于如何防止Webpack为CSS创建JS文件，请参考此链接：https://dev59.com/H1UM5IYBdhLWcg3wWvHF - BENARD Patrick

不幸的是，webpack-fix-style-only-entries 没有起作用，我在这里添加了一个新问题：https://github.com/fqborges/webpack-fix-style-only-entries/issues/19 - Andreas Richter

我找到了一个可以使用的更新插件：https://libraries.io/npm/webpack-remove-empty-scripts - Giorgio Tempesta

Answer 1

这里是一段可能对您有兴趣的代码摘录。它在此处实时编码，因此可能存在我不知道的错误。

我在自己的项目中使用了一种类似但不同的替代方式。

行为是：

1. 使用事件钩子插件，在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);
                       });
               }
       })
   ]
   

- BENARD Patrick