玩转webpack(二)

webpack文件监听

文件监听是在文件源码发生变化，自动重新构建出新的输出文件

webpack开启监听的两种方式

1.启动webpack命令时，带上--watch参数

2.在配置webpack.config.js中设置watch:true

缺点：需要手动刷新

文件监听的原理

webpack热更新(HotModuleReplacementPlugin)

scripts:{
    "dev":"webpack-dev-serve --open"
}

WDS(webpack-dev-serve)与hotmodulereplacementplugin一起使用，WDS不刷新浏览器，不输出文件，而是放在内存中所以速度更快

webpack热更新的原理

webpack热更新的过程

1.启动阶段：文件改变，在文件系统里，文件经过webpack Compiler编译成bundle.js,将bundle.js传输给Bundle Server服务器，使浏览器可以访问（1->2->A->B）

2.文件更新阶段：文件改变，在文件系统里，文件经过webpack Compiler编译成bundle.js,将编译好的文件发送给HMR Server,HMR Server再以json数据的格式发送给HMR Runtime进行代码更新，并且不用刷新浏览器（1->2->3->4）

文件指纹

文件指纹是指打包后输出的文件名的后缀

优点：方便版本管理，对于没有做更改的文件，文件指纹不会变更，浏览器可以读取缓存，加速页面的访问

文件指纹是如何生成的呢？

1.Hash:和整个项目的构建相关，只要有文件改变，整个项目的hash值就会改变

2.chunkhash:和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值

3.contenthash:根据文件的内容来定义hash,内容不变，contenthash值不变

代码压缩

1.js文件压缩：webpack内置了uglifyjs-webpack-plugin插件进行压缩

2.css文件压缩：使用optimize-css-assets-webpack-plugin同时配合cssnano预处理器一起使用

plugins:[
    new OptimizeCssAssetsPlugin({
        assetNameRegExp:/\.css$/g,
        cssProcessor:require('cssnano')
    })
]

3.html压缩：使用html-webpack-plugin设置minify参数

const HtmlWebpackPlugin = require('html-webpack-plugin')
  plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
      title: 'Hello World app',
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: 'index.html',
      template: 'index.html'
    }),
  ]