4

目录

上节: babel编译es6

上节目录如下:

clipboard.png

使用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文件夹:

clipboard.png.

  • 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)


会js的诸葛村夫
282 声望617 粉丝

主angular,兼ts|webpack|rxjs|vue,擅长造轮子