webpack 之开发环境优化 source-map

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'
}