说明

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] .js 的 test。[hash] .css ：

(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

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

Answer 1

这是一段可能会困扰您的代码。它是在此处实时编码的，因此可能存在一些我不知道的错误。

我使用另一种方法，但是在我自己的项目内部。

行为是：

使用事件挂钩插件，并在完成webpack后调用
浏览每个文件
如果文件是css，并且名称与js扩展名相同

然后删除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);
                    });
            }
    })
]

Webpack会使用css / scss文件生成js文件

说明

问题

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

1 个答案: