首页 > 解决方案 > 如何将 webpack 3.5.4 配置为只为 JS 创建源映射并跳过 CSS?

问题描述

我一直试图弄清楚如何在生产中跳过 CSS 源映射,因为我只需要 JS。有没有办法做到这一点?

我可以*.css.map稍后删除文件,但我认为如果我可以跳过它们,构建会更快。

标签: javascriptwebpacksource-maps

解决方案


以下是我的 webpack 配置中的一个片段。您可以简单地将sourceMap选项的值设置为false

 {
                    test: /\.css$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                importLoaders: 2,
                            },
                        },
                        {
                            loader: 'resolve-url-loader',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: false,
                            },
                        },
                    ],
                },

你也可以使用suppress-chunks-webpack-plugin删除.css.map文件,因为即使它们是空的,webpack 仍然会写入它们。

在您的配置中添加一个新插件:

// Skip empty CSS source maps
new SuppressChunksPlugin([     
  { name: 'your-entry', match: /\.css\.map$/ },
]),

推荐阅读