webpack性能优化——source-map

webpack.config.js 文件来配置 webpack

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
    
    
  // 引入 html 文件，解决 html 文件不能热更新的问题
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      // loader的配置
      {
    
    
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
    
    
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
    
    
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
    
    
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
    
    
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
    
    
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
    
    
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    
    
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    // 开启 HMR 功能
    // 当修改了 webpack 配置，新配置要想生效，必须重启 webpack 服务
    hot: true
  },
  devtool: 'cheap-module-source-map'
};

/**
 * source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了， 通过映射可以追踪源代码错误）
 *    [inline-|hideen-|eval-][nosources-][cheap-[module-]]source-map
 * 
 *    source-map： 外部
 *        错误代码准确信息 和 源代码的错误位置
 * 
 *    inline-source-map: 只生成 一个 内联的 source-map 文件
 *        错误代码准确信息 和 源代码的错误位置
 *        
 *    hidden-source-map: 生成外部的 source-map 文件
 *        错误代码的错误原因，但是没有错误位置
 *        不能追踪源代码错误，只能提示到构建后代码的错误位置
 * 
 *    eval-source-map： 每一个文件都生成对应的 source-map，都在 eval
 *        错误代码准确信息 和 源代码的错误位置
 *        
 *    nosources-source-map: 外部
 *        错误代码确准信息，但是没有任何源代码信息
 * 
 *    cheap-source-map: 外部
 *        错误代码准确信息 和 源代码的错误位置
 *        只能精确到行
 * 
 *    cheap-module-source-map: 外部
 *        错误代码准确信息 和 源代码的错误位置
 *        module 会将 loader 的 source map 加入
 * 
 *    内联和外部的区别： 1. 外部生成了 .map 文件,内部没有  2. 内联构建速度更快
 * 
 * 开发环境： 速度快，调试更友好
 *     速度快：（eval > inline > cheap> ...)
 *            eval-cheap-source-map
 *            eval-source-map
 *     调试更友好： 
 *            source-map (精确到行和列)
 *            cheap-module-source-map （只精确到行，且加入 loader 的 source map）
 *            cheap-source-map (只精确到行)
 *     综合以上两点： eval-source-map(脚手架默认使用的） / eval-cheap-module-source-map
 * 
 * 生产环境： 源代码要不要隐藏？ 调试要不要更友好
 *    内联会让代码体积变大，所以在生产环境下不用内联
 *     隐藏源代码： 
*         nosources-source-map（彻底全部隐藏）
*         hidden-source-map（只是隐藏源代码，而不会隐藏构建后的代码，会提示构建后代码的错误）
 *    调试友好：
 *        source-map
 *    综合： source-map(调试最好) / cheap-module-source-map（速度快一些）
 */
webpack性能优化——source-map

猜你喜欢
