webpack4之sourceMap配置

发表于 | 分类于


sourceMap的作用

当入口文件出错，打包后的文件也会相应出错。若不设置sourceMap，浏览器上只能找到导出后文件出错的位置，为了能够找到入口文件出错的位置，就需要sourceMap，sourceMap是一个映射关系。

配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  mode: 'development',
  devtool: 'source-map', // 默认是eval，是通过eval执行映射关系，判断是否有误
  entry: {
    index1: './index.js',
  },
  plugins: [new HtmlWebpackPlugin({
    template: './index.html'
  }), new CleanWebpackPlugin()],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'sef')
  }  
}
devtool最佳方案
1
2
3
4
5
development环境：
devtool: 'cheap-module-eval-source-map'

production环境：
devtool: 'cheap-module-eval-source-map'
devtool配置项说明
1
2
3
4
5
1、source-map: 会生成index1.js.map文件，包含映射关系
2、inline-source-map: 生成的映射关系代码会出现在打包文件中，并生成一行sourceMappingURL的base64
3、cheap-inline-source-map: cheap节省映射关系，只会告诉问题出现在第几行，第几列就不会映射，cheap打包性能就会提升
4、cheap-module-source-map: module是不仅会打包业务代码，即入口文件，还会映射第三方文件
5、eval: 映射关系打包成一行并用eval执行，对于简单代码来说打包性能是最快的，复杂代码不好