一、优化打包构建速度

HMR

HMR:hot modulle replacement，热模块替换 

1.解决的问题

修改部分模块代码，只会重新打包修改的模块代码，不会将全部文件重新打包，提高构建速度

2.开启HMR功能

在devServe中将hot设置为true 
 devServer: {
    //自动更新，只会在内存中编译打包，不会有任何输出，下载指令：npm i webpack-dev-server
    //运行指令：npx webpack-dev-server
    contentBase: resolve(__dirname, 'build'),//构建后的路径
    compress: true,//启动gzip压缩
    port: 3000,
    open: true,
    hot:true//开启HMR
  }

3.需要注意的问题

（1）样式文件：

可以使用HMR功能，style-loader内部已经实现

（2）js文件：

默认不能使用HMR，如果需要使用则修改js代码，添加支持HMR的代码
在js文件中： 
例如：

if (module.hot) {//module.hot为true,说明开启了HMR功能
  module.hot.accept('./js/a.js', function () {
        //function方***监听前面./js/a.js这个文件的变化，一旦发生变化，其他的模块不会重新打包构建，而是执行这个回调函数
    console.log(add(1, 7))
  })
}

（3）html文件：

默认不能使用HMR，并且如果开启HMR，热更新会失效，并且不需要做HMR功能


二、优化代码调试

source-map

1.source-map

是一种提供源代码映射到构建后代码的技术，如果构建后的代码出错，可以通过映射追踪到源代码的错误，方便调试

2.使用：

在webpack.config.js中设置： 
 devtool: 'source-map'

3.属性值介绍

（1）内联和外部的区别：

    1）外部生成了source-map文件，内联没有
    2）内联构建速度更快

（2）devtool的属性值

    1）source-map：外部
 有准确的错误代码信息
 有源代码的错误位置
    2）inline-source-map：内联，只生成一个内联source-map
有准确的错误代码信息
有源代码的错误位置
    3）hidden-source-map：外部（只能看见构建后的代码，不能看见源代码）
有准确的错误代码信息
没有源代码的错误位置，只能提示到构建后的源代码错误
    4）eval-source-map：内联
每一个文件都生成对应的source-map，并且都在eval函数中
有准确的错误代码信息
有源代码的错误位置
    5）nosource-source-map：外部（隐藏了源代码和构建后的代码）
有准确的错误代码信息
没有任何源代码的错误信息
    6）cheap-source-map：外部
有准确的错误代码信息
有源代码的错误位置，但是只能精确到哪一行，不能精确到具体出错的代码
    7）cheap-moudle-source-map
有准确的错误代码信息
有源代码的错误位置
module会将loader的source-map也加入

（3）使用source-map需要考虑的问题

    1）开发环境方面：速度快、调试更加友好
速度：eval>inline>cheap
调试：source-map>cheap-module-source-map>cheap-source-map
综合可使用：eval-source-map（vue\react框架默认使用）   eval-cheap-moudle-source-map
    2）生产环境：代码要不要隐藏（内联会让代码体积变大，所以在生产环境不用内联）
综合可使用：source-map  cheap=module-source-map