3

描述

在 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-插件/问题/255）。

4

1 回答 1

0

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

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

行为是：

  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);
                    });
            }
    })
]
于 2019-07-10T20:17:48.340 回答