wepack source-map

链接: webpack Devtool

const path = require('path')

module.exports = {
    // 默认为 production，打包后的代码会被压缩, 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production, 为模块与chunk启用最小化混淆(minify)和优化
    mode: "production",
    // 此选项控制是否生成，以及如何生成 source-map, 里面包含了源代码与打包后代码的映射关系，在代码报错的时候，会显示出错的行列，以及错误的文件
    // 加载bundle.js的时候遇到最后一行的 @sourceMappingURL=bundle.js.map 会加载bundle.js.map，从而可以知道源代码的位置
    // 不同的值会明显影响到构建(build)和重新构建(rebuild)的速度
    // 模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
    //      none (推荐pro)默认值 不生成source-map
    //      eval (推荐dev) 生成后的代码会被eval执行，每个模块都有一个eval函数，调用eval函数的时候，会传入一个参数，参数就是模块的代码，不会生成单独的source-map文件
    //      source-map 生成单独的source-map文件，你应该将你的服务器配置为，不允许普通用户访问 source map 文件
    // 不推荐使用
    //      cheap 生成的source-map文件中不包含列信息，不包含loader的sourcemap
    //      module 会将loader的sourcemap加入
    //      inline 生成的source-map文件为dataUrl形式，不单独生成source-map文件
    //      hidden 不会在bundle文件中生成注释
    //      nosources 不会生成source-map文件
    // vue-cli 默认使用的是 eval-source-map
    // react-create-app 默认使用的是 cheap-module-source-map
    devtool: 'source-map',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: 'bundle.js'
    }
};

切勿同时使用 devtool 选项和 SourceMapDevToolPlugin或者是EvalSourceMapDevToolPlugin 插件。