webpack学习第六步——source-map的使用

什么是source-map

• 构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。处理是指
  • 压缩，减小体积
  • 将多个文件合并成同一个文件
  • 其他语言编译成javascript，比如TypeScript和CoffeeScript等

设置dev-tool

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: "development",
    entry: {
        bundle: './src/index.js',
    },
    // 设置为none
    devtool: "none",
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 2 ,
                        modules: true
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

关闭source-map后打包，打包后生成bundle.js

打开source-map

devtool: "source-map"

• 打包后的模块在模块后面会对应引用一个.map文件，同时在打包好的目录下会针对每一个模块生成相应的.map文件
• 多出.map文件，方便在调试时定位错误

inline-source-map

devtool: "inline-source-map"

• 不会生成.map文件，source-map以base64形式放到js文件里

cheap

devtool: "cheap"

• cheap报错提示信息只精确到行，不用精确到列，性能更好

module

devtool: "module"

• module模式会对三方库、loader等的也负责

eval

devtool: "eval"

• eval会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后的对应关系
• eval通过eval来执行，性能最快，但是复杂的代码可能显示不全

总结

• 在实际应用中根据需求来组合使用
  • 在dev环境中我们使用：cheap-module-eval-source-map
  • 在prd环境中我们使用：cheap-module-source-map