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

问题描述

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

In webpack I am using mini-css-extract-plugin:

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

在块文件中加载 scss 文件:

To load scss files in chunk files:

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

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

When I load a scss with an dynamic import:

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

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

It will generate a test.[hash].css containing the styles and a 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(见idea 1)或者不发出/使用几乎空的js文件?

Do you have a way to either include the scss in the js file (see Idea 1) or to not emit/use the nearly empty js file?

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

My first idea was not using mini-css-extract-plugin for dynamic imported scss, but this will include a lot css-base stuff in the js (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/255).

推荐答案

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

Here is an extract of code that could interrest you. It's coded in live here, so there is maybe some error I don't know.

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

I use an alternative way but nearby inside my own project.

行为是:

1. 使用事件挂钩插件并在 webpack 完成后调用它
2. 遍历每个文件
3. 如果文件是 css 并且与 js 扩展名相同

4. 然后删除js文件

1. Use the Event Hook Plugin and call it when the webpack is done
2. Loop through each file
3. If file is css and have the same name as with js extension

4. Then remove the js file

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！