webpack5随笔

webpack5五大核心概念

entry：入口文件，可以通过对象进行多个入口的打包，应用于组件库独立组件等。
output：输出文件，入口文件经过一顿操作，最终形成的bundle.js
常用参数：
1）path: path.resolve(__dirname, ‘./build/static’), // 输出路径
process.cwd()和__dirname的区别：
process.cwd()返回当前工作目录。如：调用node命令执行脚本时的目录。
__dirname返回源代码所在的目录。

eg：对于d:\dir\index.js。

console.log(cwd: ${process.cwd()});
console.log(dirname: ${__dirname});

命令	process.cwd()	__dirname
node index.js	d:\dir	d:\dir
node dir\index.js	d	d:\dir

2）fulename: ‘xxxx.js’ // 如果是多入口就是 ‘[name].js’
3）chunkFilename：[id].js // 此选项决定了非初始chunk 文件的名称
4）libraryTarget: ‘commonjs2’ // 这个比较重要，决定打包输出方式，主要有umd，amd，cmd，common，common2等。如果是umd，配合library，作用是当引入js库时，可以通过library的value去进行引用js库里的方法。详细用法还是去看文档。

1.CSS打包

同webpack4打包方式，通过style-loader，css-loader进行打包，如果应用less，sass，scss，
则需要less-loader，sass-loader

1.图片打包

相比于webpack4，对于图片打包弃用了【url-loader, file-loader】相比下增加了asset类型，所以无需下载额外的plugin，直接在config.js里进行配置即可
test 对于图片后缀进行打包
type:asset
parser.dataUrlCondition.maxSize: 转化为base64的最大字节（通常为8-12k）
generator.fileName：图片的地址 img/[hash:10][ext][query]

2.babel打包工具：

通过 【智能预设】 把es6转换成es5，可以写在webpack的rule里，也可以写在babel.config.js里
presets: [‘@babel/preset-env’],

3.html打包插件：HtmlWepackPlugin

能够生成一个html模版，并且把打包后的js自动引入，但是原模版的html不会存在，需要加template参数，把原模版的路径放进去（path.resolve(__dirname, ‘publicc/index.html’)）,这样打包后会创建一个新的模版；
新的模版特点：1.模版结构和原模版一致，2.会自动引入打包后的js；

4.webpack做性能优化

1）解决页面白屏（MiniCssExtractPlugin），因为js中引入css会导致css阻塞，所以当网速较慢时，由于html先进行加载，css后加载，一些图片等会出现闪现现象；
解决方法：将css提取到一个单独的css文件中，js按需进行加载，同时css的引入方式是通过link进行引入；

5.VueLoaderPlugin

webpack中打包.vue文件时使用，vue-loader不同版本引入方式不同，具体可以参考node_modules下vue-loader下是否有lib目录；
const { VueLoaderPlugin } = require(“vue-loader”);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);

6.MiniCssExtractPlugin

该插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持 CSS 和 SourceMaps 的按需加载。