Webpack中的sourceMap配置

---------------------------------------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文件(这个配置项比较少见)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值