在Webpack中创建mini-css-extract-plugin的源映射

Question

我想要此输出CSS文件的源映射 这是我的webpack代码。 我正在尝试在“ m-theme / assets / theme.css”中获取输出。 请注意，我没有服务器权限，无法使用theme.css制作.map文件。 我不确定如何使用mini-css-extract-plugin。请在这里指导我。

var webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    entry:'./javascript/app-checkout.js',
    watch:true,
    output:{
        path:__dirname,
        filename:'m-theme/assets/simply-checkout.js'
    },
    plugins:[
    new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery"
    })
    ]
});
var barConfig = Object.assign({}, config, {
    entry:'./javascript/app.js',
    watch:true,
    output:{
        path:__dirname,
        filename:'m-theme/assets/theme.js'
    },
    module: {
        rules: [
        {
            test: /\.scss$/,
            use: [
            {
                loader: MiniCssExtractPlugin.loader,
                options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: __dirname
          }
      },
      "css-loader",
      "sass-loader"
      ]
  }
  ]
},
plugins:[
new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "m-theme/assets/theme.css",
            chunkFilename: "theme.css"
        }),
new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery"
})
]
});
// Return Array of Configurations
module.exports = [
fooConfig, barConfig,       
];