[英]How to get sourcemaps to work in Webpack?
我最近从grunt / bower移到了webpack,但是无法使sourcemaps工作。 我得到像debugger:// VM8967这样的代码引用,而不是像我以前那样使用真实文件名。 我尝试了多种组合
mode: 'development', devtool: 'cheap-module-source-map',
正如许多地方所建议的,例如这里和这里,但没有任何运气。 这似乎是每个人都需要的非常标准的行为,所以我确定我犯了一些愚蠢的错误。 希望有人能帮忙。 我用:
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
我的webpack.config看起来像这样:
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
},
{
test: /\.(eot|woff|ttf|woff2|svg|png|jpg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets',
},
},
],
},
],
},
plugins: [
new CopyWebpackPlugin([{ from: 'app/images', to: 'images' }]),
new CopyWebpackPlugin([{ from: 'app/languages', to: 'languages' }]),
new CopyWebpackPlugin([{ from: 'app/views', to: 'views' }]),
new CopyWebpackPlugin([{ from: 'app/robots.txt' }]),
new CopyWebpackPlugin([{ from: 'app/404.html' }]),
new CopyWebpackPlugin([{ from: 'app/.htaccess' }]),
new CopyWebpackPlugin([{ from: 'app/favicon.ico' }]),
new CopyWebpackPlugin([{ from: 'app/apple-touch-icon.png' }]),
new HtmlWebpackPlugin({
template: 'app/index.html',
}),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
};
对于js源映射,您可以这样做
module.exports = {
// ...
devtool: false,
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: ['vendor.js']
})
]
};
连结这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.