webpack source-map代码构建映射

webpack.config.js中追加如下配置：

devtool: 'inline-source-map’

 /**
 *  所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs
 *  运行项目指令
 *  webpack 会打包结果输出
 *  npx webpack-dev-server 只会在内存中编译打包，没有输出
 *
 *  HMR: hot module replacement 热模块替换 / 模块热替换
 *   作用： 一个模块发生变化，只会重新打包这一个模块。
 *      极大提升构建速度。
 *
 *      样式文件： 可以使用HMR功能，因为style-loader内部实现了。
 *      js文件： 默认不能使用HMR功能。（需要修改js代码，添加支持HMR功能的代码）
 *        注意： HMR功能对js的处理，只能处理非入口js文件的其它文件。
 *      html文件： 默认不能使用HMR功能。问题：html文件不能热更新了。(不用做 HMR 功能)
 *      解决： 修改 entry入口，将html文件引入
 **/
// resolve 用来拼接绝对路径的方法
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack 配置
    // 入口
    // entry: './src/js/index.js',
    // 解决 html文件 的HMR 问题
    entry: ['./src/js/index.js', './src/index.html'],
    // 输出
    output: {
        // 输入文件名
        filename: 'js/build.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径
        // build 路径
        path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        rules: [
            // 详细loader配置
            {
                // 匹配那些文件
                test: /\.css$/,
                // 使用哪些loader处理
                use: [
                    // 执行顺序，从右到左，从下到上，依次执行
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 需要less-loader + less
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载 url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片小于8Kb，就会被base64处理
                    // 优点： 减少请求数量，减轻服务器压力，缺点：图片体积会更大，文件请求速度更慢
                    limit: 8 * 1024,
                    // 问题： url-loader默认用es6模块化解析，html-loader引入图片是commonjs
                    // 解析式会出问题： [object Module]
                    // 解决：关闭url-loader的es模块化，使用commonjs解析
                    esModule: false,
                    // 给图片重命名
                    // [hash:10] 图片的hash的前10位
                    // [ext] 文件原来扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/,
                // 处理html文件的img图片 负责引入img，从而能被url-loader进行处理
                loader: 'html-loader'
            },
            {
                //处理其它资源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    // 插件
    plugins: [
        // html-webpack-plugin
        // 默认创建一个空的html， 引入打包输出的所有资源（js/css）
        // 需要有结构的html文件
        new HtmlWebpackPlugin({
            // 复制文件,并自动引入打包输出的所有资源（js/css）
            template: "./src/index.html"
        })
    ],
    // 模式 development 开发， production 生产
    mode: 'development',

    // 开发服务器 devServer，用来自动化
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为： npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip 压缩
        compress: true,
        port: 3000,
        // 自动打开浏览器
        open: true,
        // 开启HMR功能
        // 当修改了webpack配置，新配置要想生效，必须重启webpack服务
        hot: true
    },
    devtool: 'inline-source-map'
}
/**
 * source-map: 提供源代码到构建后代码映射技术。 如果构建后代码出错，通过映射可以追踪到源代码错误。
 *      [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 *
 *      source-map： 外部
 *          错误代码准确信息 和 源代码的错误位置
 *      inline-source-map： 内联
 *          只生成一个内联source-map
 *          错误代码准确信息 和 源代码的错误位置
 *      hidden-source-map： 外部
 *          错误代码原因，但是没有错误位置
 *          不能追踪源代码错误，只能提示到构建后代码的错误位置
 *      eval-source-map： 内联
 *          每个文件都生成一个source-map
 *          错误代码准确信息 和 源代码的错误位置
 *      nosources-source-map: 外部
 *          错误代码准确信息，但是没有任何源代码的信息
 *      cheap-source-map: 外部
 *          错误代码准确信息 和 源代码的错误位置
 *      cheap-module-source-map: 外部
 *          错误代码准确信息 和 源代码的错误位置
 *          module会将loader的source-map加入
 *
 *      内联 外部区别： 外部生成文件，内联没有。 内联构建速度更快。
 *
 *      开发环境： 速度快，调试更友好。
 *          速度快（eval > inline > cheap >...）
 *              eval-cheap-source-map
 *              eval-source-map
 *          调试更友好
 *              source-map
 *              cheap-module-source-map
 *              cheap-source-map
 *          最常用的就是： eval-source-map / eval-cheap-source-map
 *
 *      生产环境： 源代码要不要隐藏？调试要不要更友好。
 *          内联会让代码体积变大，所以生产环境不用内联
 *          nosources-source-map 全部隐藏
 *          hidden-source-map 之隐藏源代码，会提示构建后代码错误信息
 *          常用： source-map / cheap-module-source-map
 * */

结论：
开发环境： 速度快，调试更友好。

最常用的就是： eval-source-map / eval-cheap-source-map

生产环境： 源代码要不要隐藏？调试要不要更友好。

最常用的就是： source-map / cheap-module-source-map