阅读create-react-app webpack配置文件

注意点

如何解决moment.js多语言打包进vendor的问题？

两个解决方案

shouldInlineRuntimeChunk变量

在开发时是否关闭以script标签的形式加载manifest.json，大部分都是应该关闭的，因为这样可以减少一个网络请求。

css-loader的作用

主要来处理background:(url)还有@import这些语法。让webpack能够正确的对其路径进行模块化处理

文件名

在生产环节下基本都带了hash[name].[contenthash:8].js，css也是。

压缩没有用默认的，而是自己配置了一套js和css的，用来解决一些社区中遇到的问题。

各种样式loader代码重复

可以用getStyleLoaders方法进行抽象。

HtmlWebpackPlugin

在生产环境中要配置开启压缩，有很多配置选项。

InlineChunkHtmlPlugin

webpack运行时代码(我理解的就是webpack的一些公用代码)放在html中，而不是浪费一个请求去加载js文件。

CaseSensitivePathsPlugin

为了解决mac系统中文件名大小写不敏感导致的打包不报错的问题。

疑问

optimization.splitChunks为: [
  chunks: 'all',
  name: false, // // 抽取出来文件的名字，默认为 true，表示自动生成文件名。这个时候vendor的名称会变掉
]

如何设置才能达到抽离common-pagea-pageb;common-pagec-paged;的效果？

splitChunks: {
        chunks: 'all',
        name: false, // 抽取出来文件的名字，默认为 true，表示自动生成文件名。这个时候vendor的名称会变掉。
        cacheGroups: { 
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'all',
          },
          default: {
            minChunks: 2, // 为什么这里设置为2就会抽离失败？
            priority: -20,
            chunks: 'all',// 测试发现需要在这里也写all才可以做到common文件被抽离为单个文件。而且，多个common文件会被打包到同一个文件内。
            reuseExistingChunk: true
          }
        }
      },

为什么这里设置为2就会抽离失败？和文章写的不符

ManifestPlugin插件作用？

service worker?