Хорошо, мой подход был неверным. Изменено несколько вещей, и теперь у меня есть исходные карты для файлов js и css.
Я вставляю свой файл webpack.config на тот случай, если кто-то посчитает его полезным (возможно, это очевидно для большинства, но я Я новичок в Webpack, надеюсь, это поможет еще одному новичку ie, как я).
Изменения, которые я сделал: оказалось, что экстрактор-загрузчик и файл-загрузчик не были нужны. Вместо этого я использовал 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