前言

最近在学习webpack，记录一下学习的基础东西，以及项目构建的速度和体积的优化。

webpack基本配置

基本配置之前写过一遍文章，不重新写啦，不了解请转webpack之小白篇。

修改代码，自动编译

webpack –watch 不会刷新浏览器，开发环境打包后的js是存在磁盘中。

package.json文件

webpack.dev.js文件

注：webpack.dev.js // 开发环境配置 webpack.prod.js // 生成环境配置

webpack-dev-server –open 会自动打开浏览器，需要与webpack.HotModuleReplacementPlugin()配合使用，代码变动，可以自动刷新浏览器。

package.json文件

webpack.dev.js文件

热更新（HMR:Hot Module Replacement）原理

Webpack Complier将代码转化为bundle.js文件。
将bound.js文件传输Bounle Server，提供浏览器Browser访问。
当代码更新时，会出发HMR Server 将代码传入到HMR Runtime（通常以json形式）
HMR Runtime接受会更新代码，刷新浏览器。

文件指纹

打包输出的文件名的后缀，通常作为版本的管理，没有修改的文件，可以使用浏览器缓存，加速访问。

hash：和整个项目有关，只要文件修改，整个项目构建的hash都会改变，通常图片和字体使用。
chunkhash:不同的entry有不同的chunkhash值，通常js文件使用。
contenthash：根据文件内容生成hash值，通常css使用。

style-loader：是将css插入style标签，插入到头部，没有单独的css文件。
MiniCssExtractPlugin(filename:'[name][conetnthash:8].css’).loader 将css提出单独的文件，link到头部。
webpack.prod.js

代码压缩

js，webpack4使用了terser-webpack-plugin插件默认以及打包过了，uglifyjs-webpack-plugin打包es6会报错。
html，使用html-webpack-plugin（一个html模板对应一个html-webpack-plugin）
css，使用optimize-css-assets-webpack-plugin插件，与cssnano配合使用

css3:自动添加浏览器前缀（aotuperfixer）

移动端css中的px转化为rem

rem：相对单位，（相对于根元素html的font-size）
px：绝对单元
px2rem:将px转为rem

lib-flexible：动态的计算根元素的font-size

在入口文件引入import 'lib-flexible'

多页面应用（entry+html-webpack-plugin）

动态的设置entry，html-plugin-webpack，使用glob库，glob.sync()可以同步的获取正则匹配的目录信息。

source map 定位源代码

开发环境中开启，生产环境上关闭。
webpack.prod.js

优化构建时命令行日志显示

webpack中stats：统计信息
使用friendly-errors-webpack-plugin插件，将stats设置为’error-only’

webpack进阶用法

提取公共资源

将react，react-dom 等公用的库，通过cdn的方式引入，不打包进入到bounld.js,使用html-webpack-externals-plugin引入

new HtmlWebpackExternalsPlugin({
 externals: [
    {
      module: 'react',
      entry: 'https://unpkg.com/react@17/umd/react.production.min.js',
      global: 'react',
    },
  ],
}) 
复制代码

通过webpack4自带的splitchunk属性进行公共脚本分离，splitchunk也可以提取公共使用的自己封装的函数，但是需要多个打包入库同时使用，一个项目使用多次是不可以的。

    optimization:{
        splitChunk:{
           minSize:0,
           cacheGroups:{
                vendor:{ // 提取node_modules的公共资源
                    test:/[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name:'vendor',
                    chunks:'all'
                },
                commons:{ // 提取node_modules以及自己写的公告函数。（需要多个打包入口引用了依赖和公共函数）
                    chunks:'all',
                    name:'commons',
                    minChunks:'2'
                }
           }
        }
    }
复制代码