MiniCssExtractPlugin 插件将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。(或者或者style-loader)

    1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    2. module.exports = {
    3. plugins: [new MiniCssExtractPlugin()],
    4. module: {
    5. rules: [
    6. {
    7. test: /\.module\.(scss|sass)$/,
    8. include: paths.appSrc,
    9. use: [
    10. 'style-loader',
    11. isEnvProduction && MiniCssExtractPlugin.loader, // 仅生产环境
    12. {
    13. loader: 'css-loader',
    14. options: {
    15. modules: true,
    16. importLoaders: 2,
    17. },
    18. },
    19. {
    20. loader: 'postcss-loader',
    21. options: {
    22. postcssOptions: {
    23. plugins: [
    24. [
    25. 'postcss-preset-env',
    26. ],
    27. ],
    28. },
    29. },
    30. },
    31. {
    32. loader: 'thread-loader',
    33. options: {
    34. workerParallelJobs: 2
    35. }
    36. },
    37. 'sass-loader',
    38. ].filter(Boolean),
    39. },
    40. ]
    41. },
    42. };