[英]How to get sourcemaps to work in Webpack?
I have recently moved from grunt/bower to webpack but can't get sourcemaps to work. 我最近从grunt / bower移到了webpack,但是无法使sourcemaps工作。 I get code references like debugger://VM8967 instead of real file names like I'm used to. 我得到像debugger:// VM8967这样的代码引用,而不是像我以前那样使用真实文件名。 I've tried many combinations of 我尝试了多种组合
mode: 'development', devtool: 'cheap-module-source-map',
as suggested in many places, like here and here but without any luck. 正如许多地方所建议的,例如这里和这里,但没有任何运气。 This seems like very standard behavior that everyone would need so I'm sure I do some stupid mistake. 这似乎是每个人都需要的非常标准的行为,所以我确定我犯了一些愚蠢的错误。 Hope someone can help. 希望有人能帮忙。 I use: 我用:
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
And my webpack.config looks like this: 我的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,
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.