Webpack学习小结（二）

Webpack学习周结：

前言

Webpack学习小结（一）

Webpack 附加内容

entry 入口解析

entry: 入口起点:

1. 单入口

string --> './src/index.js'

 打包形成一个chunk, 输出一个bundle文件
 此时chunk名称默认是main

2. 多入口

array --> ['./src/index.js', './src/add.js']

所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件
--> 只有在HMR功能中让html热更新生效~

3. 多入口

object --> {}

有几个入口文件就形成几个chunk, 输出几个bundle文件
此时chunk名称是 key

特殊用法

{
   // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件
   index: ['./src/index.js', './src/count.js'],
   // 形成一个chunk, 输出一个bundle文件。
   add: './src/add.js'
}

缓存

babel缓存

 cacheDirectory: true

文件资源缓存

hash: 每次webpack构建时会生成一个唯一的hash值。
	问题: 因为js和css同时使用一个hash值。
chunkhash: 根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
	问题: js和css的hash值还是一样的
		因为css是在js中被引入的,所以同属于一个chunk
contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样

tree shaking

目的：

去除无用代码

前提：

1. 必须使用ES6代码
2. 开启production环境

作用:

减少代码体积

在package.json中配置

	"sideEffects": false
	//作用代码都没有副作用(都可以进行tree shaking)
	//问题: 可能会把css / @babel/polyfill (副作用) 文件干掉
	"sideEffects": ["*.css", "*.less"]
	//表示css / less 文件不会被当副作用文件干掉

oneof

作用：

只匹配module中的一个配置，如果多次匹配一类文件，oneof只能匹配第一个，所以需要将多次匹配的其他部门单另提出来。

example:

module: {
        rules: [
            /**
             * oneOf
             * 以下loader只会匹配一个
             * 注意：不能有两个配置处理同一种类型文件
             */
            {
                oneOf: [
                	{
                        //处理css文件
                        test: /\.css$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            /**
                             * css兼容性处理
                             */
                            {
                                loader: 'postcss-loader',
                                options: {
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-preset-env')()
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            /**
                             * 开启多进程打包
                             * 进程启动大概为600ms,进程通信也有开销
                             * 只有工作消耗时间比较长,才需要多进程打包
                             */
                            {
                                loader: 'thread-loader',
                                options: {
                                    workers: 2 // 进程2个
                                }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    // 预设: 知识babel做怎么样的兼容性处理
                                    presets: [
                                        [
                                            '@babel/preset-env',
                                            {
                                                //按需加载
                                                useBuiltIns: 'usage',
                                                //指定core-js版本
                                                corejs: {
                                                    version: 3
                                                },
                                                //指定兼容性做到哪个版本浏览器
                                                targets: {
                                                    chrome: '60',
                                                    firefox: '60',
                                                    ie: '9',
                                                    safari: '10',
                                                    edge: '17'
                                                }
                                            }
                                        ]
                                    ],
                                    // 开启babel缓存
                                    // 第二次构建时,会读取之前的缓存
                                    cacheDirectory: true
                                }
                            }
                        ]
                    },
                    { // 等等一系列 module配置
                    }
                ]
            }
        ]
}

source-map

source-map是一种提供源代码到构建后代码映射技术
（如果构建后代码出错了，通过映射可以追踪源代码错误）

[inline-|hidden-|eval-][nosources-][cheap-[]module-]source-map

inline-source-map: 内联
只生成一个内联source-map

hidden-source-map: 外部
eval-source-map: 内联
每一个文件都生成一个内联source-map，都在eval

nosources-source-map: 外部
cheap-source-map: 外部
cheapmodule-source-map: 外部

内联 和 外联 的区别: 
	1. 外部生成了文件，内联没有
	2. 内联构建速度更快

devtool: 'source-map',

devServe

HMR:

hot module replacement 热模块替换 / 模块热替换

作用：

一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
极大提升构建速度

devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 800,
    open: true,
    // 开启HMR功能
    // 当修改了webpack配置，新配置要想生效，必须重启webpack服务
	hot: true
}

PWA 渐进式网络开发应用程序

PWA：

work --> workbox-webpack-plugin

在webpack.config.js中的代码

plugins: [
        new WorkboxWebpackPlugin.GenerateSW({
            /**
             * 1. 帮助serviceworker快速启动
             * 2. 删除旧的serviceworker
             *
             * 生成一个 serviceworker 配置文件
             */
            clientsClaim: true,
            skipWaiting: true
        }),
    ]

在index.js中的代码

1. eslint不认识 window、navigator全局变量

   解决: 需要修改package.json中 eslintConfig 配置

   "env": {
   	"browser": true // 支持浏览器端全局变量
   }
   

2. sw代码必须运行在服务器上

   --> nodejs
   --> npm i serve -g
     	serve -s build 启动服务器,将build目录下所有资源作为静态资源暴露出去
   

// 注册serviceworker
// 处理兼容性问题
if('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
    .register('./service-worker.js')
    .then(() => {
      console.log('sw注册成功了~');
    })
    .catch(() => {
      console.log('sw注册失败了~');
    })
  })
}

参考学习资料

webpack 中文文档

尚硅谷webpack5学习视频