webpack解析

一。资产管理Asset Management
  1.加载css,style-loader(把css放到head中),css-loader(分析css的依赖关系)
  2.加载图片，file-loader,url-loader(小图片也就是base64)
  3.加载字体 file-loader
  4.加载数据csv-loader和xml-loader
二。发展Development
  1.找错误代码也就是源映射devtool: 'inline-source-map',
  2.Choosing a Development Tool(选择开发工具)
    1.webpack's Watch Mode//缺点是您必须刷新浏览器才能看到更改
    2.webpack-dev-server//无需刷新就能更改
    3.webpack-dev-middleware//是一个包装器，它将webpack处理的文件发送到服务器
三。代码拆分Code Splitting//按需或并行加载
  1.入口点：使用entry配置手动拆分代码。(Entry Points)
    entry: {
      index: './src/index.js',
      another: './src/another-module.js'
    },
  2.防止重复：使用SplitChunksPlugin重复数据删除和拆分块。(Prevent Duplication)
    用SplitChunksPlugin和optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  3.动态导入：通过模块内的内联函数调用拆分代码。(Dynamic Imports)
    if(){}动态
  4.预取/预加载模块(Prefetching/Preloading modules)
    1.Prefetching:空闲时间加载
    2.Preloading一起同时加载
  5.捆绑分析(Bundle Analysis)
    1.webpack-chart：webpack统计信息的交互式饼图。
    2.webpack-visualizer：可视化和分析您的软件包，以查看哪些模块占用空间以及哪些模块可能重复。
    3.webpack-bundle-analyzer：一个插件和CLI实用程序，它将bundle内容表示为方便的交互式可缩放树形图。
    4.webpack bundle优化帮助器：此工具将分析您的捆绑包，并为您提供有关改进措施的可操作建议，以减少捆绑包大小。
四。高速缓存Caching
  1.output:{
    filename: '[name].[contenthash].js',
  }
  2.SplitChunksPlugin代码拆分
  3.模块标志符webpack.HashedModuleIdsPlugin()对hash的相关插件
五。Authoring Libraries
六。环境变量(Environment Variables)--env允许您传入任意数量的环境变量
七。建立绩效(Build Performance)优化性能
  本指南包含一些有助于提高构建/编译性能的有用提示
  1.include和exclude
  2.resolve
    尽量减少在项目数resolve.modules，resolve.extensions，resolve.mainFiles，resolve.descriptionFiles，因为它们增加文件系统调用的次数。
    设置resolve.symlinks: false，如果你不使用符号链接（如npm link或yarn link）。
    设置resolve.cacheWithContext: false是否使用自定义解析插件，而不是特定于上下文的插件。
  3.Dlls(使用DllPlugin)
    使用将DllPlugin较少更改的代码移动到单独的编译中。这将提高应用程序的编译速度，尽管它确实增加了构建过程的复杂性。
  4.更小=更快(Smaller = Faster)
    使用更少/更小的库。
    使用CommonsChunkPlugin多页面应用程序。
    在多页应用程序中使用CommonsChunkPluginin async模式。
    删除未使用的代码
    只编译您当前正在开发的代码部分。
  5.Worker Pool(工人池)
    该thread-loader可用于卸载昂贵装载机的工作池。
    (注不要使用太多的worker，因为Node.js运行时和加载器都有启动开销。最小化工作进程和主进程之间的模块传输。IPC很贵)
  6.Persistent cache(持久缓存)
    cache-loader在清除缓存目录"postinstall"在package.json
  7.增量构建
    轮询导致CPU负载您可以使用增加轮询间隔watchOptions.poll
  8.编译内存
    以下实用程序通过在内存中编译和提供资源而不是写入磁盘来提高性能：
      webpack-dev-server
      webpack-hot-middleware
      webpack-dev-middleware
  9.stats.toJson速度
    stats除非在增量步骤中有必要，否则请避免检索对象的某些部分
  10.Devtool(source-map)
    "eval" 具有最佳性能，但不会帮助您转换代码。
    cheap-source-map如果您可以使用稍差的映射质量，那么这些变体会更高效。
    使用eval-source-map变量进行增量构建。
    =>在大多数情况下，cheap-module-eval-source-map是最好的选择
  11.避免生产特定工具
    某些实用程序，插件和加载器仅在构建生产时才有意义。例如，TerserPlugin在开发过程中使用while 来缩小和破坏代码通常没有意义。通常应在开发中排除这些工具：

    TerserPlugin
    ExtractTextPlugin
    [hash]/[chunkhash]
    AggressiveSplittingPlugin
    AggressiveMergingPlugin
    ModuleConcatenationPlugin
  12.最小入口块
    通过保持小块来确保入口块的发射价格便宜。以下代码块提取仅包含运行时的块，其他所有块作为子块：
  13.避免额外的优化步骤
    功能实现了但是消耗性能
  14.多个汇编
    使用多个编译时
      1.parallel-webpack：它允许在工作池中进行编译。
      2.cache-loader：缓存可以在多个编译之间共享。
  15。最大限度地减少预设/插件的数量
八。内容安全政策
  csp默认情况下不启用CSP
九。Dependency Management依赖管理(es6模块,CommonJS的,AMD)
十。输出管理
  1.output: {
     filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
    }
  2.HtmlWebpackPlugin
  3.clean-webpack-plugin
  4.清单数据可以提取到json文件中用WebpackManifestPlugin
十一。热模块更换Hot Module Replacement
十二。Tree Shaking
    前提使用ES2015模块语法（即import和export）
    1.这样做的方法是"sideEffects":false,package.json属性。
    2.optimization: {
       usedExports: true
      }
    3.缩小输出mode: 'production'
    4.缺点：css,和polyfill做配置
十三。production
      webpack-merge代码的合并和拆分
      1.Specify the Mode(指定模式)
        process.env.NODE_ENV === 'production'它们可能会丢弃或添加大量代码，以优化实际用户的运行方式。
        从webpack v4开始，指定mode自动DefinePlugin为您配置：
      2.缩小相关插件
        TerserPlugin
        BabelMinifyWebpackPlugin
        ClosureWebpackPlugin
        注如果您决定尝试使用另一个缩小插件，请确保您的新选择也按树摇动指南中的说明删除死代码并将其作为optimization.minimizer
      3.devtool: 'source-map'
      4.最小化CSS
        MiniCssExtractPlugin(css的相关抽离)
  十四。延迟加载
      代码分割，
      prefetch,preloading
  十五。Shimming填充全局变量
      1.new webpack.ProvidePlugin({
        _: 'lodash'//lodash用_符号可以全局使用
      })
      2.Granular Shimming( this指向window)
        module: {
          rules: [
            {
              test: require.resolve('index.js'),
              use: 'imports-loader?this=>window'
            }
          ]
        },
      3.Global Exports( exports-loader)使用日期库时
      4.poillyfile
      5.bable-preset-env
  十六。typScript
        1.npm install --save-dev typescript ts-loader
        2.sourceMap添加到我们的TypeScript配置中
          {
            "compilerOptions": {
              "outDir": "./dist/",
        +     "sourceMap": true,
              "noImplicitAny": true,
              "module": "commonjs",
              "target": "es5",
              "jsx": "react",
              "allowJs": true
            }
          }
        3.这可能会降低构建性能。
  十七 PWD渐进式Web应用程序
        workbox-webpack-plugin
  十八。publicPath
        1.output.publicPath

此文档可以长期学习和记忆