我已经尝试了几种方法,但是我无法让sourceMap在任何浏览器上都能工作。 它在style.css旁边生成style.css.map,但是在浏览器中,我看到的只是style.css。我正在拆分js和CSS,还拆分了两者的admin和前端。有什么明显的事情我应该尝试吗?这是我的webpack.config:
// Return array of configurations
module.exports = function ( env ) {
return exportModules([js, css], env);
};
/**
* Merge filetype configs with shared config and return them as an array of objects.
* @param objs
* @param env
* @return {Array}
*/
const exportModules = (objs, env) => {
const objArr = [];
for(let i = 0; i < objs.length; i++){
objArr.push({
...config(env),
...objs[i]
});
}
return objArr;
};
// Shared config options
const config = function ( env ) {
return {
watch: env === 'watch',
watchOptions: {
ignored: [/node_modules/]
},
stats: {
colors: true
},
devtool: 'source-map'
}
};
// Config for JS files
const js = {
entry: {
'main.js' : `${__dirname}/src/js/main.es6.js`,
//'admin.js' : `${__dirname}/src/js/admin.es6.js`,
},
output: {
path: `${__dirname}/build/js`,
filename: '[name]'
},
module: {
rules: [
{ test: /\.js$/, use: { loader: 'babel-loader' }, exclude: /node_modules/ },
]
}
};
// Config for SCSS files
const css = {
entry: {
'style.css' : `${__dirname}/src/scss/style.scss`,
'admin.css': `${__dirname}/src/scss/admin.scss`
},
output: {
path: `${__dirname}/build/css`,
filename: '[name]'
},
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
// module chain executes from last to first
use: [
{
loader: 'file-loader?sourceMap',
options: { name: '[name].css', outputPath: '../css/' }
},
{ loader: 'extract-loader?sourceMap' },
{ loader: 'css-loader?sourceMap', options: { url: false, sourceMap: true } },
{ loader: 'resolve-url-loader', options: { publicPath: null } },
{ loader: 'sass-loader?sourceMap', options: { sourceMap: true } }
]
},
]
}
};