webpack - Webpack 4、vuejs、mini-css-extract-plugin、sass-loader、source-map の問題

Question

やあ、

style.cssvue アプリから自分のスタイルをグローバル ファイル (で) にコンパイルしようとしています。SASS (scss) を使用しWebpack 4ます。

問題: 私の実際の conf で生成されたソースマップは、完全に間違っていました! これを webpack の SourceMapDevToolPlugin でパスしようとしました。以下の webpack conf を参照してください。

const webpack = require('webpack');
const path = require('path');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const SassLintPlugin = require('sass-lint-webpack')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                include: [path.resolve(__dirname, 'src')],
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                ),
                loader: 'babel-loader',
                options: {
                    plugins: ['syntax-dynamic-import'],
                },
                test: /\.js$/
            },
            /*{
                test: /\.css$/,
                use: [
                    /*{
                        loader: MiniCssExtractPlugin.loader
                    },*
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ],

            },*/
            {
                test: /\.scss$/,
                exclude : /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                    },

                ]
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|ttf)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    // publicPath: 'assets/',
                    context: 'src'
                }
            }
        ]
    },

    plugins: [
        new VueLoaderPlugin(),
        (process.env.WEBPACK_TARGET === 'client') ? new VueSSRClientPlugin(): new VueSSRServerPlugin(),
        // new SassLintPlugin() // no verbose - lint 
        new MiniCssExtractPlugin({
            filename: 'css/style.css'
        }),
        new webpack.SourceMapDevToolPlugin({
            filename: "[file].map",
            exclude: ["/vendor/"],
            append: "//# sourceMappingURL=[url]",
            moduleFilenameTemplate: '[resource-path]',
            fallbackModuleFilenameTemplate: '[resource-path]',
            noSources: false,
            module: true
        }),
        // new CleanWebpackPlugin(['dist']),
        // new ManifestPlugin()
    ],

    entry: {
        app: process.env.WEBPACK_ENTRY,
        //entrysass: './src/sass/global.scss',
    },

    output: {
        filename: 'js/[name].[chunkhash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        //libraryTarget: (process.env.WEBPACK_TARGET === 'node') ? 'commonjs2' : undefined
        libraryTarget: 'commonjs2'
    },

    resolve: {
        alias: {
            'assets': path.resolve(__dirname, './src/assets'),
            // 'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src')
        },
        extensions: ['.ts', '.vue', '.js', '.scss']
    },

    mode: (process.env.NODE_ENV === 'prod') ? 'production' : 'development',


    // target: (process.env.WEBPACK_TARGET === 'node') ? process.env.WEBPACK_TARGET : 'web',
    target: 'node',
    // node: (process.env.WEBPACK_TARGET === 'node') ? undefined : false,

    // For bundle renderer source map support
    devtool: 'cheap-module-source-map',

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    priority: -10,
                    test: /[\\/]node_modules[\\/]/
                },
                styles: {
                    name: 'styles',
                    test: /\.s?css$/,
                    chunks: 'all',
                    minChunks: 1,
                },
            },

            //chunks: 'async',
            minChunks: 1,
            //minSize: 30000,
            name: true
        }
    }
};

次のようなApp.vueコンポーネントから私のスタイルをインポートします。/src

<style lang="scss">
    @import './sass/global.scss';
</style>

（PS：スタイルをインポートするためのより良い方法があれば、ヒントやヒントを取り入れました）（PS2：プリフェッチスタイルとjsでWebpackとVue-ssr-renderを何度もインポートすると解決できませんか？）

あなたの答えをありがとう:)