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)