webpack 基础到构建（六）

十三，HMR -- 热模块更替 
    ---基于开发环境
    ---使用devServer后，发现了更新文件都是整个项目重新打包的问题
    ---HMR使用对象：css【需设置】，而js/html默认不可使用【需配置】

    13.1  在webpack配置选项中的devServer中添加hot: true即可热更替css资源，前提是使用style-loader【开发环境下】
    13.2  html文件则是以数组结构通过添加入口的方式，如图13.1，一般的单页应用其实无需加入HMR
    13.3  在入口文件中添加js文件的HMR设置，如图13.2；这里将排除入口文件本身

图13.1 图13.2

十四，cache
     ---面试前端经常会被问的问题：前端构建工程如何优化？其中肯定会回答到的是利用缓存，怎么使用缓存？如何保证更新后资源的唯一性和实时性？那可能会回答将打包的资源名字中添加hash值的方法，而具体的又不得而知了...
    ---babel缓存  -->让二次打包速度更快，需要babel-loader
    ---文件资源缓存，指打包后的css和js  -->解决上线代码缓存问题
   
    ---hash                   生成js、css文件的hash值一致
    ---chunkhash         同入口生成js、css文件的hash值一致
    ---contenthash       仅修改了的文件将该改变

    14.1  babel-loader下的options属性对象中添加cacheDirectory: true  ==>第二次构建将读取babel缓存
    14.2  文件资源缓存通过文件名配置，可选择以上三种

通过设置filename名设置hash值

这里的测试要配置服务器测试，可自行搭建node服务或自己熟悉的；

十五，tree shaking
    ---性能优化举措，字面意为：摇树，将多余或不使用或不引用的代码块去除，从而减少代码体积，通过去除某些没有的js、css等；
    ---使用条件：ES6模块化  production环境，so，要想测试，切记Mode和NODE_ENV的值设置为production

    15.1 package.json中配置属性“sideEffects: [' *.css ','*.less']”，避免某些有用的资源排除，需如此设置

十六，oneOf
    ---loader规则将匹配每一个资源文件，oneOf意为匹配到rule后，不再向下匹配
    ---将符合一个文件同时被一个loader处理的规则

使用oneOf优化打包速度

十七， source-map   
    ---目的：提供源代码到构建代码的映射，从而达到调试追错的目的

    17.1 webpack.config.js中同级entry等基本属性，添加devtool属性即可

相关属性值