javascript - 配置了webpack的source map，却没有map到原文件。

问题描述

问 题

配置了webpack的source map，却没有map到原文件。
chrome开发者工具里点击报错行数，导航到的文件是编译过的，而不是我编写的原始文件。
以下是我webpack.config.js文件

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
var path = require('path');
var WebpackChunkHash = require("webpack-chunk-hash");

var publicPath = ''; //服务器路径

var plugins = [];

if (process.argv.indexOf('-p') > -1) { //生产环境
    plugins.push(new webpack.DefinePlugin({ //编译成生产版本
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }));
}
module.exports = {
    //  devtool: 'cheap-module-eval-source-map',
    entry: {
        car: './app/car-index.jsx', //车展
        left: './app/left-index.jsx', //文件入口
        right: './app/right-index.jsx'
    },
    output: {
        path: path.join(__dirname, "./assets"), //编译到当前目录
        filename: '[name].js', // 编译后的文件名字
        publicPath: './assets/'
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: [
                    'babel-loader?presets[]=es2015,presets[]=stage-0,retainLines=true'
                ],
                exclude: /(node_modules|bower_components)/
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // use: 'css-loader'
                    publicPath: './',
                    use: {
                        loader: 'css-loader',
                        options: {}
                    }
                })
            }, {
                test: /\.jsx$/,
                loaders: ['jsx-loader', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,retainLines=true'],
                exclude: /(node_modules|bower_components)/
            }, {
                test: /\.(png|jpg)$/,
                loader: 'file-loader',
                options: {
                    name: 'imgs/[name].[ext]',
                }
                // 以下可用
                // use: 'url-loader?limit=20000&name=imgs/[name].[ext]&useRelativePath=false&outputPath=../../assets/site/',
            }

        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'], //后缀名自动补全
        alias: {
            style: path.resolve(__dirname, 'style'),
            assets: path.resolve(__dirname, 'assets'),
            tools: path.resolve(__dirname, 'app/tools'),
            core: path.resolve(__dirname, 'app/core'),
            vendors: path.resolve(__dirname, 'vendors'),
            data: path.resolve(__dirname, 'app/data')
        }
    },
    resolveLoader: {
        moduleExtensions: ['-loader']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'venders',
            minChunks: function(module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && (module.context.indexOf('node_modules') !== -1 || module.context.indexOf('vendors') !== -1);
            }
        }), new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        }),
        new ExtractTextPlugin('styles-[name].css'),
        new webpack.HashedModuleIdsPlugin(),
        new WebpackChunkHash(),
        new webpack.HotModuleReplacementPlugin(),
    ],
    devtool: "source-map",
    devServer: {
        // contentBase: false,
        port: 3000,
        publicPath: "/assets",
        hot: true,
        watchContentBase: true,
        overlay: true,
    }
};

这里是报错截图：

解决方案

不要使用jsx-loader，更换loader即可解决问题。

这篇关于javascript - 配置了webpack的source map，却没有map到原文件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！