coderWhy

为process.env.xxx = xxx赋值时，process.env会将值强制转换为String类型

10. Webpack-devServer介绍

1. devServer 的 publicPath、contentBase、watchContentBase、hotOnly、host、port、open、compress、proxy、changeOrigin、historyApiFallback

2. resolve 的 extensions、alias、mainFiles

   11. Webpack-多环境及代码分离

   1. 环境分离

3. Webpack的config需要写成函数，默认参数env，可以根据scripts的—env判断当前环境是否为生产环境或者开发环境

4. 多环境分离，使用scripts进行build和serve，以及context和entry的路径关系
5. babel的plugins分环境加载，需要在webpack.config.js中将env设置到process.env.NODE_ENV，可以直接在babel.config.js中读取

6. 使用webpack-merge合并config

   2. 代码分离

7. 配置entry多入口，进行代码分离，依赖项可以额外添加

8. 配置optimization的splitChunks

   12. Webpack-代码分包

   1. 动态加载

9. 使用import进行动态加载，使用magic comment指定chunk名 /* webpackChunkName: 'xxx' */

   2. prefetch/preload

10. 懒加载的文件，可以指定prefetch或preload

11. /* webpackPrefetch: true */ 浏览器闲置期间下载

12. /* webpackPreload: true */ 会跟随所在文件加载而加载

    3. runtimeChunk

13. 针对运行时的文件，进行打包

14. 参数：true/multiple | single | function | object

    4. CDN

15. 内容分发网络Content Delivery Network或Content Distribution Network

16. 购买CDN服务器，将output的publicPath设置为CDN地址，全部使用CDN文件
17. 第三方库的CDN服务器，需要配置webpack的externals，指定某些第三方库不进行打包，并将第三方库的CDN地址，在index.html中引入

18. 引入第三方库的CDN时，可以根据环境不同，进行优化

    {% if(process.env.NODE_ENV === 'production') { %}
    <script src="xxxx"></script>
    {% } %}

    5. Shimming

    详情见Shimming

    6. MiniCssExtractPlugin

19. 需要配合MiniCssExtractPlugin.Loader使用

    7. hash、contenthash、chunkhash

20. hash，某一处改动，build后的所有文件hash值都会改变

21. chunkhash，某个文件改动，build后，当前文件以及引用文件的hash值会改变，其他文件hash值不变

22. contenthash，某一文件改动，build后，只更改修改内容所在文件的hash值，其他文件hash值不变

    13. Webpack-打包效率

    1. 查找第三方库的全局变量

    2. DLL

    详情见webpack的DLL处理

    3. Terser —- 代码压缩

23. webpack中，production环境，默认使用TerserPlugin以及其他插件，对代码进行压缩优化

24. 详情见webpack的terser-webpack-plugin

    4. CSS压缩

25. css压缩通常是去除空格

26. CssMinimizerPlugin

    5. 作用域提升（Scope Hoisting）

27. Scope Hoisting从webpack3新增

28. 对作用域提升(将函数提升到一个模块运行，基于ESModule)使打包后的代码更小、运行更快
29. production环境下，默认开启

30. 详情见ModuleConcatenationPlugin

    14. Webpack-treeshaking

    1. js的treeshaking

31. usedExports

32. sideEffects

33. treeshaking

    2. css的treeshaking

34. purgecss-webpack-plugin

    3. http压缩

35. 传送时，进行gzip压缩

36. compression-webpack-plugin

    4. HTML代码压缩

37. html-webpack-plugin

    5. chunk后的包内联到HTML中

38. Inine-chunk-html-plugin

    6. webpack对library进行打包配置

    15. Webpack—打包原理解析

    1. 分析各个插件或loader打包时间

39. speed-measure-webpack-plugin

    2. 分析打包大小

40. cli添加参数 --profile --json=stats.json，可以在

41. webpack-bundle-analyzer

    3. webpack启动流程分析—-webpack-cli流程