webpack 之开发环境优化 source-map

Bertha 。 2022-10-24 05:54 210阅读 0赞

# webpack 之开发环境优化 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，都在eval
                错误代码准确信息 和 源代码的错误位置
            nosources-source-map：外部
                错误代码准确信息，但是没有任何源代码信息
            cheap-source-map：外部
                错误代码准确信息 和 源代码的错误位置
                只能精确的行
            cheap-module-source-map：外部
                错误代码准确信息 和 源代码的错误位置
            
            内联和外部的区别：1. 外部生成了文件，内联没有2，内联构建速度更快
        
        开发环境：速度快，调试更友好
            速度快（eval>inline>cheap>...）
                eval-cheap-souce-map
                eval-source-map
            调试更友好
                souce-map
                cheap-module-souce-map
                cheap-souce-map
    
                --> eval-source-map / eval-cheap-module-souce-map
    
        生产环境：源代码要不要隐藏？调试要不要更友好
            内联会让代码体积变大，所以在生产环境不用内联
            nosources-source-map 全部隐藏
            hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
    
    
            --> source-map / cheap-module-souce-map
     */
    
    
    
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    // 代码复用loader
    const commonCssLoader = [
        // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
        'style-loader', 
        // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
        'css-loader'
    ]
    
    module.exports = {
        
        // webpack 配置
        // 入口起点
        entry : ['./src/index.js', './src/index.html'],
        // 输出
        output : {
        
            // 输出文件名
            filename : 'js/built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                {
        
                    test : /\.css$/, // 匹配哪些文件
                    //使用哪些 loader 进行处理
                    use: [ 
                        // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                        ...commonCssLoader
                    ]
                },
                {
        
                    test : /\.less$/, 
                    use: [ 
                        ...commonCssLoader,
                        'less-loader'
                    ]
                },
                {
        
                    test : /\.html$/,
                    loader : 'html-loader'
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html',
            }),
        ],
        //模式
        mode : 'development', // 开发模式
        // mode : 'production' // 生产模式
        devServer: {
        
            // 项目构建后的路径
            contentBase : resolve(__dirname, 'dist'),
            // 启动 gzip 压缩
            compress : true,
            // 端口号
            port : 3000,
            // 自动打开本地默认浏览器
            open : true,
            // 开启 HMR 功能
            hot: true
        },
        devtool: 'source-map'
    }