在 webpack 4 中通过编译 SASS 生成源映射

Question

我的项目不是 JS 网络应用。它是一个带有 PHP 模板的传统 CMS，可以调用所需的 JS 和 CSS 文件。我正在使用 webpack4 来实现这个目标：

1. 对于 JS：打包、缩小、polyfill 并创建一个 js sourcemap -- 效果很好，这里没问题。
2. 从 src 中的文件夹复制资源（字体和图像）。到另一个地区。 ——也在工作。
3. 对于我的 SCSS 文件：从给定目录编译 Sass，添加前缀，并将单个 css 文件输出到特定文件夹，包括 CSS SOURCEMAP。 一切正常但我无法生成 CSS 源图。我可以用 Grunt 完成所有这些，但我希望只使用一个工具 -webpack！

我正在粘贴我的配置文件，看看是否有人发现问题所在。

我已经尝试将options:{ sourceMap:true,} 添加到这个加载器： sass-loader, postcss-loader, css-loader 但后来我得到了一长串似乎来自extrac-loader 的错误。

感谢有关此问题的任何提示或帮助。我已经花了 2 天时间来解决它，但没有任何进展！

    const path = require('path');
    const OptimizeCSSAssetsPlugin = require(
      "optimize-css-assets-webpack-plugin"
    ); // Recommended for Minifying outputted css
    const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin 
    var webpack = require('webpack'); // used by SourceMapDevToolPlugin --which was recommended over devtool.

    module.exports = {
        cache: false,
        entry: {
            'main': [ // forces webpack to process specified files
                     '../src/js/main.js',
                     '../src/sass/screen.scss',
                     ],
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
        },
        mode: 'development',
        devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
        module:{
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../css/[name].css', // Destination of final processed css file
                            }
                        },
                        {
                            loader: 'extract-loader', //The extract-loader evaluates the given source code on the fly and returns the result as string.
                        },
                        {
                            loader: 'css-loader?-url', //The css-loader interprets @import and url() like import/require() and will resolve them.

                        },
                        {
                            loader: 'postcss-loader', // adds prefixes
                        },
                        {
                            loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
                        },
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets:
                            [
                                '@babel/env',
                                {
                                    // "corejs": 3,
                                }
                            ]
                        }
                    }
                },

            ] // End of rules
        }, // End of module
        plugins: [
            new webpack.SourceMapDevToolPlugin(
                {
                    filename: '[name].map',
                    columns: false,
                     module: true,
                }
            ),
            new OptimizeCSSAssetsPlugin({
              cssProcessor: cssnano,
              cssProcessorOptions:  {
                      discardComments: {
                        removeAll: true,
                      },
                      // Run cssnano in safe mode to avoid
                      // potentially unsafe transformations.
                      safe: true,
                    },
              canPrint: false,
            }),
          ],
    } // End of module.exports

Answer 1

好的，我的方法是错误的。修改了一些东西，现在我有了 js 和 css 文件的源映射。

我正在粘贴我的 webpack.config 文件以防有人发现它有用（也许这对大多数人来说是显而易见的，但我是 webpack 的新手，希望这对像我这样的新手有所帮助）。

我所做的更改： 我发现不需要 extract-loader 和 file-loader 。我改用了 mini-css-extract-plugin... 它允许使用源映射。

与 optimize-css-assets-webpack-plugin 存在冲突（如果您使用它进行缩小），因此请检查插件部分配置以确保您的站点地图已生成。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // extracts and saves css files
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // Minifies css
const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin  in the css minification
var webpack = require('webpack'); // used by SourceMapDevToolPlugin

module.exports = {
    cache: false,
    entry: {
        'main': [ // forces webpack to process specified files
                 '../src/js/main.js',
                 '../src/sass/main.scss',
                 ],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
    },
    mode: 'development',
    devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets:
                        [
                            '@babel/env',
                            {
                                // "corejs": 3,
                            }
                        ]
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                              publicPath: '/public/path/to/',
                            },
                        },

                        {
                            loader: 'css-loader', //The css-loader interprets @import and url() like import/require() and will resolve them.
                            options: {
                                url: false,
                                sourceMap: true,
                            },
                        },

                        {
                            loader: 'postcss-loader',  // adds prefixes
                            options: {
                                sourceMap: true,
                            },
                        },

                        {
                            loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
                            options: {
                                sourceMap: true,
                                // importer: globImporter(),
                            },
                        },
                ]
            },

        ] // End of rules
    }, // End of module
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/[name].css'
        }),
new OptimizeCSSAssetsPlugin({
          cssProcessor: cssnano,
          cssProcessorOptions:  {
                  map: {
                    inline: false,  // set to false if you want CSS source maps
                    annotation: true
                  },
                  discardComments: {
                    removeAll: true,
                  },
                  // Run cssnano in safe mode to avoid
                  // potentially unsafe transformations.
                  safe: true,
                },
          canPrint: false,
        }),
        new webpack.SourceMapDevToolPlugin(
            {
                filename: '[name].map',
                columns: false,
                 module: true,
            }
        ),
      ],
} // End of module.exports