optimization.splitChunks

cacheGroups
个人感觉splitChunks中除了cacheGroup之外的配置是用来作代码分割的，而cacheGroup是作为模块合并的配置项。cacheGroup内配置优先级高于外面配置，可以理解为先进行分割再进行合并，分割的代码放到哪个缓存组的块中，由优先级决定。
可进行如下配置：

splitChunks:{
    cacheGroups: {
        common:{
            chunks: 'initial',
            name:'testCommon', // 打包后的文件名
            minSize: 0, 
            minChunks: 2 // 重复2次才能打包到此模块
        vendor: {
            priority: 1, // 优先级配置，优先匹配优先级更高的规则，不设置的规则优先级默认为0
            test: /node_modules/, // 匹配对应文件
            chunks: 'initial',
            name:'testVendor',
            minSize: 0,
            minChunks: 1
除了test, priority和reuseExistingChunk只能卸载cacheGroups里，其他属性都能直接写在splitChunks下。
 
chunks
 前一步配置中提到chunks一般用initial打包规则，chunks可配置的参数有：all, async和initial三种。具体区别详见：
 https://juejin.im/post/5c08fe7d6fb9a04a0d56a702
 
总结一下：
 initial: 对于匹配文件，非动态模块打包进该vendor,动态模块优化打包
 async: 对于匹配文件，动态模块打包进该vendor,非动态模块不进行优化打包
 all: 匹配文件无论是否动态模块，都打包进该vendor
 
webpack4的默认配置中，splitChunks.chunks默认是async,因为webpack更希望将代码中异步引入的部分作为独立模块进行打包，异步的部分在需要时引入，这种懒加载的方式更能提升页面性能。
 
注：import()可动态加载模块，返回一个Promise。
 
minSize
 当模块大于minSize时，进行代码分割
 
maxSize
 当模块大于maxSize时，尝试将该模块拆分，如设置maxSize为50*1024，代码中引入了jQuery,jQuery模块大于50kb,于是尝试将jQuery拆分（只是尝试，不一定真能拆分成功）
 
maxAsyncRequests
 同时加载的模块数，若代码分割设置的是一个库分割成一个模块，打开某个页面时同时需要加载10个库，设置maxAsyncRequests：5，只会将那10个库分割成5个模块
 
maxInitialRequests
 最大初始化加载次数，入口文件可以并行加载的最大文件数量。
 maxInitialRequest和maxAsyncRequests中的’initial’和’async’代表的意思和chunks配置中的’initial’和’async’一样，maxAsyncRequests代表懒加载时最多只能同时引入多少个模块，maxInitialRequests代表非懒加载时最多能同时引入多少模块。
 假设maxInitialRequests设为3，有文件a.js中，使用了大量import xx from ‘xx’,a.js依赖的这些非动态加载的模块，最多只会被打包成3个模块。
 可参考：
 https://ymbo.github.io/2018/05/21/webpack配置代码分割/#%E4%B8%89%E3%80%81%E7%96%91%E9%9A%BE%E9%85%8D%E7%BD%AE%E9%A1%B9
 
automaticNameDelimiter
 打包的chunk名字连接符，如设为’-’,生成的chunk文件名为chunk-name.js
 
name
 是否以cacheGroups中的filename作为文件名
 
reuseExistingChunk
 重复使用已经存在的块，若某个模块在之前已经被打包过了，后面打包时再遇到这个模块就直接使用之前打包的模块
                    optimization.splitChunkscacheGroups个人感觉splitChunks中除了cacheGroup之外的配置是用来作代码分割的，而cacheGroup是作为模块合并的配置项。cacheGroup内配置优先级高于外面配置，可以理解为先进行分割再进行合并，分割的代码放到哪个缓存组的块中，由优先级决定。可进行如下配置：splitChunks:{    cacheGroups: {        common:{            chunks: 'initial',
				
除了的webpack基本配置，还可以进一步添加配置，优化合并文件，加快编译速度。下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发相关的东西删掉。下面的介绍均以此代码配置作参考。
/*生成环境配置文件：不需要一些dev-tools,dev-server和jshint校验等。和开发有关的东西删掉*/
var webpack = require('webpack');
var path = require('path');
var node_modules 
				
最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。
——摘自 webpack
从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。
而关于 optimization.splitChunks 中的chunks，webpack 官方文档却没有很好的进行举例解释，只说明了 async.
				
webpack打包时自动去除console.log——terser/terser-webpack-plugin
terser
由于老牌工具uglify不支持es6，且uglify-es不再更新，我们选择terser作为js代码压缩工具。
# 全局安装terser命令行工具
npm install -g terser
# 使用terser
terser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js
# -c即compress表示
				
webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。
在构建项目时设置路径值
开发模式中，我们通常有一个 assets/ 文件夹，它往往存放在和首页一个级别的目录下。这样是挺方便；但是如果在生产环境下，你想把这些静态文件统一使用CDN加载，那该怎么办？
想要解决这个问题，你可以使用有着悠久历史的环境变量。比如说，我们设置了一个名为 ASSET_PATH 的变量：
import webpack from 'webpack';
				
方法1：使用插件：compression-webpack-plugin
// 1安装
npm install --save-dev compression-webpack-plugin
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExten
				
webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
最近在项目中使用了一下webpack，所以这里打算对目前了解的使用方法做一个小小的总结
为什么是webpack
webpack一下自己就????了，这绝对是一个重要的原因。
然后我之前项目中都是通过requireJS，通过AMD来做到模块化开发。webpak不仅支持打包，而且支持AMD 和 CommonJS 方式来做模块化开发，所以打算尝试一下webpack来实现模块化。
我的需求简单，适合新上手webpack，只需要生成上线
				
`optimization.splitChunks` 是 Webpack 中用于代码分割的配置选项。它可以将多个入口文件中共同依赖的模块提取出来，形成一个单独的 chunk，从而减少重复代码的加载和执行，提高页面加载速度。
具体来说，`optimization.splitChunks` 可以配置以下选项：
- `chunks`：表示哪些 chunk 参与分割，默认为 `async`，即只对异步加载的 chunk 进行分割。
- `minSize`：表示分割出来的 chunk 的最小大小，默认为 30000。
- `maxSize`：表示分割出来的 chunk 的最大大小，默认为 0，即不限制大小。
- `minChunks`：表示一个模块被多少个 chunk 引用时才会被分割，默认为 1。
- `maxAsyncRequests`：表示异步加载时同时请求的最大数量，默认为 5。
- `maxInitialRequests`：表示入口文件中同时加载的最大数量，默认为 3。
- `automaticNameDelimiter`：表示自动生成的 chunk 名称中，用于连接模块名称的分隔符，默认为 `~`。
- `name`：表示手动指定生成的 chunk 名称。
- `cacheGroups`：表示缓存组，可以对符合条件的模块进行分组，然后对每个组单独进行分割。