webpack4 devtool和source-map构建错误代码提示

不念不忘少年蓝@ 2021-07-24 20:20 396阅读 0赞

1、配置
    	在webpack.config.js中和entry同级设置
    		devtool:'构建方式'
    	
      外联:生成.map文件
      内联:将.map作为DataUrl嵌入,不生成.map文件
      cheap:不包含列的错误提示
      module:会将loader中的source-map也加进来
      
      source-map:外联,会生成.js.map文件,能提示错误代码信息和源代码位置,点击进入源代码
      inline-source-map: 内联,映射文件内容写入打包后的js文件末尾,比外联速度更快,能提示错误代码信息和源代码位置
      eval-source-map:内联,为每一个文件末尾生成一个source-map,能提示错误代码信息和源代码位置,位置前会添加hash值:
      hidden-source-map: 外联,会生成.js.map文件 提示构建后代码的错误信息以及位置,点击进入构建后代码,非源代码
      nosources-source-map:外联,能提示错误代码信息和源代码位置,但点击不提供源代码和构建后文件
      cheap-source-map:外联,能提示错误代码信息和源代码位置,点击进入源代码,会报错一整行
      cheap-module-source-map:外联,能提示错误代码信息和源代码位置,点击进入源代码,会报错一整行,module会将loader中的source-map也加进来
     
      	各种构建方式参考网址https://webpack.js.org/configuration/devtool/#devtool
     
     构建规则:
     	运行速度:eval>inline>cheap,可以混合搭配提高速度
    	 	如:eval-cheap会更快,因为eval精确到列和行,cheap只精确到行
      
     开发模式:
     	调试更友好
    	eval-source-map/eval-cheap-source-map 都比较合适
     
     生产模式:
     	隐藏源代码:
     		nosources-source-map
    		hidden-source-map
     	不隐藏源代码:
     		source-map/ cheap-module-source-map

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin= require('mini-css-extract-plugin');
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    
    // process.env.NODE_ENV='development'
    
    module.exports = { 
      entry: ['./src/js/index.js','./src/index.html'],
      output: { 
        filename: 'src/js/build.js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              // 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
              { 
                loader: 'postcss-loader',
                ident: 'postcss',
                options: { 
                  postcssOptions: { 
                    plugins: [['postcss-preset-env',{ }]]
                  }
                }
              }
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name: '[name].[ext]',
              outputPath:'src/images'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]',
              outputPath:'src/icon'
            },
            
          },
          { //不检查node_modules
            test: /\.js$/,
            exclude:/node_modules/,
            loader: 'eslint-loader',
            enforce:'pre', //优先执行
            options: { 
              fix:true
            }
          },
          { //js兼容性处理
            test: /\.js$/,
            exclude:/(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: { 
              // 预设,指示babel做兼容性处理
              presets: [['@babel/preset-env', { 
                targets: { 
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge:'19'
                },
                useBuiltIns: 'usage', //按需加入
                corejs: {  //指定core-js版本
                  version:3
                }
              }]],
              // plugins: ['@babel/transform-runtime']
            }
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html', //将模板复制成指定文件
          minify: { 
            collapseWhitespace: true, //折叠空格
            removeComments:true  //移出注释
          }
          
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
        new MiniCssExtractPlugin({ 
          filename: 'src/css/build.css'
        }),
        new OptimizeCssAssetsPlugin()
      ],
      mode: 'development',
      //自动化,自动编译、打开浏览器和自动刷新等
      devServer: { 
        // contentBase:['xx','xx',...]
        contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
        //启动gzip压缩
        compress: true,
        port: 3000, //监听端口号
        open: true, //自动打开浏览器
        hot:true,
      },
      devtool:'inline-source-map'
    }
    
    /** * 源代码到构建后代码的映射技术,追踪源代码错误 source-map:外联,会生成.js.map文件,能提示错误代码信息和源代码位置,点击进入源代码 inline-source-map: 内联,映射文件内容写入打包后的js文件末尾,比外联速度更快,能提示错误代码信息和源代码位置 hidden-source-map: 外联,会生成.js.map文件 提示构建后代码的错误信息以及位置,点击进入构建后代码,非源代码 eval-source-map:内联,为每一个文件末尾生成一个source-map,能提示错误代码信息和源代码位置,位置前会添加hash值: nosources-source-map:外联,能提示错误代码信息和源代码位置,但点击不提供源代码和构建后文件 cheap-source-map:外联,能提示错误代码信息和源代码位置,点击进入源代码,会报错一整行 cheap-module-source-map:外联,能提示错误代码信息和源代码位置,点击进入源代码,会报错一整行 开发:速度快,调试更友好 eval>inline>cheap eval-cheap会更快,因为eval精确到列和行,cheap只精确到行 调试更友好 source-map 啥都有 cheap-module-source-map,module会将loader中的source-map也加进来 最终 eval-source-map/eval-cheap-source-map 都比较合适 生产:源代码隐藏,内联会让代码体积变大 源代码隐藏 nosources-source-map hidden-source-map 不隐藏 生产环境: source-map/ cheap-module-source-map */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d8700370be4a4084864bb5d6dbb53930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/f44e9d89fc2843eb8d7a80743795623f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，396人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 配置生成 sourceMap 方便调试

// 启用 sourceMap devtool: "source-map", optimization: { minimize: fa

深碍√TFBOYSˉ_/ 2022年11月21日 11:23/ 0 赞/ 145 阅读

相关代码构建与webpack知识点

代码构建与webpack知识点 1、Webpack 工具都做了些什么 2、常见的前端构建工具 3、了解Webpack （1）入口（entry

清疚/ 2022年10月16日 06:27/ 0 赞/ 156 阅读

相关 webpack sourcemap 选项多种模式的一些解释

有人说 Webpack 难用，原因是 sourcemap 有 7 种，本文就尝试解释下这些选项都是什么意思，不仅如此，本文还会分析如何用最好的姿势使用这些配置。先一项一项

淩亂°似流年/ 2022年07月28日 00:06/ 0 赞/ 198 阅读

相关详解Webpack中的sourcemap

小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都

妖狐艹你老母/ 2022年05月19日 00:52/ 0 赞/ 299 阅读

相关 webpack4 js构建速度优化

\\\\请注意：本文主要是针对 webpack4 的 js 构建速度做优化。 `用一句话总结本文，就是给 js 构建流程加 cache，让任务并行。` \\babel-lo

谁践踏了优雅/ 2022年05月01日 13:56/ 0 赞/ 234 阅读

相关 webpack——devtool配置及sourceMap的选择

> [官方手册传送门][Link 1] 官方对devtool配置的定义很简单：选择一种 [source map][] 格式来增强调试过程，不同的值会明显影响到构建build和

痛定思痛。/ 2022年03月01日 19:18/ 0 赞/ 310 阅读

相关 webpack4.0构建vue环境

从0开始配置Vue项目环境需要的包 `cnpm install webpack webpack-cli html-webpack-plugin mini-css-

r囧r小猫/ 2021年12月13日 17:57/ 0 赞/ 322 阅读

相关 Webpack_（第三章）_SourceMap的配置

SourceMap的配置什么是SourceMap？在webpack.config.js，在开发者模式`mode: "development"`下，默认SourceM

淡淡的烟草味﹌/ 2021年12月11日 14:34/ 0 赞/ 653 阅读

相关 webpack4 devtool和source-map构建错误代码提示

1、配置在webpack.config.js中和entry同级设置 devtool:'构建方式' 外联:生成.map文件

不念不忘少年蓝@/ 2021年07月24日 20:20/ 0 赞/ 397 阅读

相关 webpack4 构建工程化配置理论要求

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2021年07月24日 17:20/ 0 赞/ 389 阅读