webpack4.0代码调试的4种情况

4种情况

    //devtool: 'source-map',//源码映射,可以帮助我们调试源代码 会单独生成一个sourcemap文件 出错了会标识当前报错的列和行
    // devtool: 'eval-source-map',//报错会显示行和列但是不会生成map文件
    // devtool: 'cheap-module-source-map', //不会产生列 但是是一个单独的映射文件,产生后你可以保留起来用于调试
    //devtool: 'cheap-module-eval-source-map',//不会生成文件 集成在打包后的文件中 ,会有行的报错,不会有列的报错

webpack.config.js配置文件

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //多入口
    mode: "production",
    entry: {
        home: './src/index.js',
    },
    output: {
        //[name] home,other对应要打包的js名
        filename: "[name].js",
        path: path.resolve(__dirname, 'dist'),
    },
    //devtool: 'source-map',//源码映射,可以帮助我们调试源代码 会单独生成一个sourcemap文件 出错了会标识当前报错的列和行
    // devtool: 'eval-source-map',//报错会显示行和列但是不会生成map文件
    // devtool: 'cheap-module-source-map', //不会产生列 但是是一个单独的映射文件,产生后你可以保留起来用于调试
    //devtool: 'cheap-module-eval-source-map',//不会生成文件 集成在打包后的文件中 ,会有行的报错,不会有列的报错
    devServer: {
        port: "3000",
        progress: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
        // contentBase: path.join(__dirname, "public"),//此处最好是绝对路径
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }

                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            chunks: ['home']
        })
    ]
}