webpack-03：性能优化1、devtool 设置 sourcemap devtool 设置 soucre-map

1、devtool 设置 sourcemap

devtool 设置 soucre-map

devtool: "source-map",

// 会出现一个map文件，源码到bundle文件的映射

级别1： source-map 非常详细的代码到bundle代码的映射，会生出一个map文件

级别2：inline-source-map 不会生成map文件，和js代码打包到一起

级别3：eval 每个模块使用eval()执行，提供==快速的重建速度==

级别4：cheap 加了这个关键词，错误只精确到行数不精确到列数

级别5：module 加了这个关键词，第三方关键词的定位

1.eval ：每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是，它没有正确显示行号，因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

2.eval-source-map：每个模块使用eval()执行，而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的，但是它提供==快速的重建速度==和产生真实的文件

2、 webpack-dev-server

  devServer: {
    contentBase: './dist', // 默认使用的目录
    hot: true,  // 热模块更新 启动后 css 抽离不支持 contenthash、chunkhash，旧版本不至此 minicss.loader 去拆分
    hotOnly: true, // 设置为true 关闭浏览器刷新
    clientLogLevel: 'warning',
    historyApiFallback: { //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向
      rewrites: [
        {
          from: /.*/,
          to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
        }
      ]
    },
    compress: true,
    open: true, // 打开浏览器
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false, //用来在编译出错的时候，在浏览器页面上显示错误
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
  },

针对 css 文件修改只需

 devServer: {
    hot: true, 
 }
// ....

new webpack.HotModuleReplacementPlugin(),

针对 js修改

 devServer: {
    hot: true, 
    hotOnly: true, // 设置为true 关闭浏览器刷新
 }
 // ...
 new webpack.HotModuleReplacementPlugin(),

if (module.hot) {
  module.hot.accept('引入的某个文件', ()=> {
      
  })
}

3、关于 babel

支持es6语法，兼容低版本浏览器

简单理解：

es6语法：箭头函数类等

es6特性： promise类等

插件：

@babel/preset-env // 处理es6语法

@babel/pret-react // jsx 语法

如何配置兼容 es5 语法？

通过 babel-loader

npm i @babel/core babel-loader

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: [
            presets: ['@babel/preset-env'] // 解决了语法，没解决特性         
          ]
        },
      },

还要引入 polyfill 安装到生成依赖

npm i @babel/polyfill

.babelrc 配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 2,
        "useBuiltIns": "usage" // entry、usage、false的区别
      }
    ]
  ]
}

拓展阅读：