webpack中使用source map

基本介绍：

当webpack打包源代码时，可能会很难找到错误和警告在源代码中的位置。而source map的功能就是将编译后的代码映射回原始源代码，可以明确的找到错误或警告的代码位置。

代码演示：

const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个
var webpack = require('webpack');
const {resolve} = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports={
    entry:['./src/js/index.js','./src/index.html'],
    //使用source map
    devtool:'inline-source-map',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //loader的配置
            {
                //处理less资源
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                //处理css资源
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    //关闭es6模块化
                    esModules:false,
                    fix:true
                }
            },
            {
                //处理html中img资源
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                //其他资源
                exclude:/\.(html|js|css|less|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        //plugins的配置
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
    ],
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
        //开启HMR功能
        hot:true
    }
}

详解：

需要在webpack.config.js中添加代码：`devtool:'inline-source-map',`其中devtool其中可以写： [inline- | hidden- | eval-] [nosources-][cheap- [module]]source-map

1、inline-source-map：内联（生成的是内部source map文件）

• 只生成一个source map
• 可以找到错误代码的准确信息 和 源代码的错误位置
  
  2、hidden-source-map：外部（会在文件夹生成单独的文件）
  
  错误代码错误原因，但是没有错误位置不能追踪到源代码位置只能提示到构建后的代码（隐藏源代码）
  3、eval-source-map：内联的source map
• 每一个文件都声成一个source map
• 错误代码准确信息和源代码的错误位置
  4、nosources-source-map：生成外部的source map
  错误代码准确信息但是没有任何源代码的错误信息
  5、cheap-source-map：生成外部的source map
  错误代码准确信息和源代码的错误位置
  只能精确到错误信息的行不能精确到错误信息的列
  6、cheap-module-source-map：生成外部的source map
  错误代码准确信息和源代码的错误位置
  module会将loader的source map加入
  7、source-map：生成外部的source map
  可以找到错误代码的准确信息 和 源代码的错误位置

内联和外部的区别：
1、外部生成了文件，内联没有
2、内联构建速度快

开发环境要求：速度快，调试更友好
生产环境：源代码是否需要隐藏，调试更友好

速度快选择：

• eval-cheap-source-map
• eval-source-map

调试更友好：

• source-map
• cheap-module-source-map
• cheap-source-map

速度快调试友好：

• eval-source-map
• eval-cheap-module-source-map

nosources-source-map 代码全部隐藏
hidden-source-map 只隐藏源代码
开发环境可以直接使用： eval-source-map
生产环境使用：source-map
注：内联会使代码体积变大