webpack4.29.x成神之路（十二） source-map

目录

上节：babel编译es6

上节目录如下：

使用webpack编译后的代码运行在浏览器上，一旦出错，错误指向的是编译后的代码，这对调试带来极大困难，所以webpack自带devtool选项来解决这一问题。

修改webpack.config.js:

// 省略

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},
  // 开启调试
  devtool: 'source-map',

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

然后npm run build,查看bundles文件夹：

.

• source-map则会将错误指向源文件。
• source-map会为每个js都生成一个对应的.map文件
• 默认会提示错误代码的精确位置（某文件的某行某列），
• 会映射入口文件及其引入的其它依赖

修改选项：

// 省略
devtool: 'cheap-source-map',
//省略

然后npm run build,查看bundles文件夹，也会为每个js都生成一个对应的.map文件，

区别是： 加上cheap前缀就只会提示到某行，并且只管入口文件，

如果用了cheap前缀，又想映射其它依赖，需要在加上module(cheap-module-source-map)

再改选项：

// 省略
devtool: 'inline-source-map',
//省略

这时再打包就不会生成.map文件了，因为已经内联到对应的js文件中去了。

devtool选项很多，并且可以相互配合，这里给出大众推荐：

开发环境：cheap-module-eval-source-map

生产环境：cheap-module-source-map

下节：摇树优化(tree shaking)（待更新）