文件监听

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

webpack开启监听模式，有两种方式：

启动webpack命令时，带上--watch参数。
在配置webpack.config.js中设置watch:true

"build":"webpack",
"watch": "webpack --watch"

唯一缺陷：每次需要手动刷新浏览器。

文件监听的原理分析

轮询判断文件的最后编辑时间是否变化，某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout。

module.export = {
    //默认false,也就是不开启
    watch:true,
    //只有开启监听模式时，watchOptions才有意义
    watchOptions: {
        //默认为空，不监听的文件或者文件夹，支持正册匹配
        ignored:/node_modules/,
        //监听到变化发生后会等到300ms再去执行，默认300ms
        aggregateTimeout:300,
        //判断文件是否发生变化是通过不停轮循系统指定文件有没有变化实现的
        //默认每秒问1000次
        poll:1000
    }
}

热更新

使用webpack-dev-server

WDS通常是需要结合webpack内置的HotModuleReplacementPlugin插件一起使用，结合之后可以开启热更新功能。

WDS的优势：

不刷新浏览器
输出完后，文件放在内存中，没有磁盘I/O

WDS配置

"build":"webpack",
"dev":"webpack-dev-server --open"

热更新主要是在开发过程中使用，生产环境是不需要的，使用mode要设置成development。

const webpack = require('webpack')
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    }

使用webpack-dev-middleware

WDM将webpack输出的文件传输给服务器，适用于灵活的定制场景。如果使用这种方式需要先引入一个nodeServer,通常是使用express或koa,然后我们的WDM会将webpack输出的文件传输给服务器，适用比较灵活的定制场景。

热更新原理分析

webpack Compile:将JS编译成Bundle
HMR Serve: 将热更新文件输出给HMR Runtime
Bundle server: 提供文件在浏览器的访问
HMR Runtime: 会被注入到浏览器，更新文件的变化
bundle.js：构建输出的文件

文件指纹

什么是文件指纹？

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

通常文件指纹是用来做一个版本的管理的，比如说一个项目要发布的时候，有一些文件修改了，只需要新发布修改的文件，没有修改的文件并不需要修改它的文件指纹。

文件指纹如何生成?

Hash:和整个项目的构建有关，只要项目文件有修改，整个项目构建的hash值就会更改。
Chunkhash: 和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值。
Contenthash:根据文件内容来定义hash.文件内容不变，则contenthash不变。

JS的文件指纹设置

设置output的filename,使用[chunkhash]

output: {
    filename:'[name[chunkhash:8].js',
    path:__dirname+'/dist'
    
}

CSS的文件指纹设置

设置MiniCssExtractPlugin的filename,使用[contenthash]

plugins:[
    new MiniCssExtractPlugin({
    filename:'[name][contenthash:8].css'
        
    })
]

正常情况下如果是使用了css-loader和style-loader的话，css会由style-loader将css插入到style里面，并且放到<head>头部,这个时候没有独立的css文件，因此会通过MiniCssExtractPlugin这个插件把style-laoder里面的css提取出来成一个独立文件。

图片的文件指纹设置

设置file-loader的name,使用[hash]

module: {
  rules:[{
    test:/.jpa$/,
    use:[{
    loader:'file-loader',
    name:'img/[name][hash:8].[ext]'
    }]
    }
  ]
}

代码压缩

JS文件的压缩

webpack4里面内置了uglifyjs-webpack-plugin这个插件，mode是production的时候，我们默认打包出来的js文件是已经压缩过了，不需要任何的操作。当然你也可以手动的安装uglifyjs-webpack-plugin这个插件，给他设置一些额外的参数。

CSS文件的压缩

使用optimize-css-assets-webpack-plugin，同时使用预处理器cssnano，匹配到所有的css文件再用cssnano这个预处理器进行css文件的压缩。

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

html文件的压缩

修改html-webpack-plugin,给这个插件设置一些压缩参数，这个插件自身支持传入一个minify参数，这个参数可以把一些空格,换行符号，包括一些注释都给处理掉，从而达到一个压缩效果。

plugins:[
    minify:{
        html5:true,
        collapseWhitespace:true,
        preserveLineBreaks:false,
        minifyCSS:true,
        minifyJS:true,
        removeComments:false
    }
]

写在最后

笔者最近在学习webpack，会像以学习笔记的方式跟大家交流分享。
会持续更新，欢迎点赞关注。

玩转webpack系列之文件监听,文件指纹,代码压缩(二)