webpack 常用插件

"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",

"webpack-dev-server": "^3.10.3",
// 启动一个webpack本地服务器便于开发

"webpack-merge": "^4.2.2"
// 能够将两个webpack配置合并

"babel-loader": "^8.1.0",
// webpack中使用 babel 需要的loader

"@babel/core": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/polyfill": "^7.8.7",
"@babel/runtime": "^7.9.6",
"@babel/runtime-corejs2": "^7.9.6",
"core-js": "^2.6.11"
// 能够将es6+ 转换位浏览器支持的 es5-

"postcss-loader": "^3.0.0",
"autoprefixer": "^9.7.6",
// css样式添加浏览器前缀

"clean-webpack-plugin": "^3.0.0",
// 打包前清除上一次打包后生成的文件夹

"css-loader": "^3.5.3",
// 将css样式拼接成一个文件

"file-loader": "^6.0.0",
// 将源代码文件复制一个到打包生成后的文件夹中

"url-loader": "^4.1.0",
与 file-loader 功能一致
能够配置依据文件打下而生成文件或打包到一起

"html-webpack-plugin": "^4.3.0",
// 生成 依据模板html生成打包后的入口html文件

"node-sass": "^4.14.0",
"sass-loader": "^8.0.2",
// sass使用时所依赖的loader和插件

"style-loader": "^1.2.1",
// 将css添加到html文件的header中

"mini-css-extract-plugin": "^0.9.0"
css样式代码单独抽离成文件

"http-server": "^0.12.3", 
// 启动一个http服务器 
// 在命令行 执行 http-server 文件夹名（有index.html文件）

"workbox-webpack-plugin": "^5.1.3"
// PWA webpack插件 服务器done掉后能够让用户访问已缓存的页面
// https://webpack.js.org/guides/progressive-web-application/#we-dont-work-offline-now

webpack config code splitting set
optimization{
	splitChunks: {
	  chunks: "all",//同步异步都做代码分割
	  minSize: 30000, // 大于30kb
	  minRemainingSize: 0,
	  maxSize: 0,
	  minChunks: 1, // 引入次数
	  maxAsyncRequests: 6, // 最大异步数
	  maxInitialRequests: 4,// 最小同步数
	  automaticNameDelimiter: "~", // 文件名连接符
	  cacheGroups: {
		defaultVendors: {
		  test: /[\\/]node_modules[\\/]/,// 在node_modules文件夹中
		  priority: -10,// 权重值
		},
		default: {
		  minChunks: 2,
		  priority: -20,
		  reuseExistingChunk: true,// 模块相互引用只打包一次
		},
	  },
	},
}