Webpack中的sourceMap配置

Posted 2022-08-28 hellosxs

---------------------------------------webpack.config.js----------------------------------------------------------
module.exports = 

    mode:‘development‘,

     // 开发环境 development
     // devtool:‘cheap-module-eval-source-map‘,

    // 生产环境 production
    // devtool:‘cheap-module-source-map‘,


    devtool:‘cheap-module-eval-source-map‘,
    entry: 
        main: ‘./src/index.js‘
    ,
    output: 
        filename: ‘[name].js‘,
        path: path.resolve(__dirname,‘dist‘)
    ,
    plugins:[new htmlWebpackPlugin(
        template:‘src/index.html‘
    ),new CleanWebpackPlugin([‘dist‘])],
    module: 
        rules: [
            
                test: /\.jpg$/,   //这个配置是重点
                use: 
                    loader:"file-loader",
                    options:
                        name:‘[name].[ext]‘,  //打包出来的图片名字和后缀都和之前的一样，
                        outputPath:"images/" //打包出来的文件存放在dist/images文件夹中
                    
                
            ,

        ]
    
;
------------------注释--------------------------

• eval：使用 eval 方式可大幅提高持续构建效率

• source-map： 产生.map文件

• cheap： 使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息 （如报错信息只用给出在哪一行就可以，需要给出第几列错误）

• module： 包含loader的sourcemap（

• inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）