shuwenjunn / note Goto Github PK

Path.join

const path = require('path');
console.log(path.join('src', 'task.js')); //输出src/task.js

const path = require('path');
console.log(path.join(''));//输出 .

如果返回的路径字符串长度为零，那么他会返回一个.，代表当前的文件夹。

output publicPath

URI，通一资源标志符(Uniform Resource Identifier， URI)，表示的是web上每一种可用的资源，如 HTML文档、图像、视频片段、程序等都由一个URI进行定位的。

https://www.jianshu.com/p/4818d61d46c6

publicPath: 顾名思义就是一个公共地址，用于处理静态资源的引用地址问题，比如图片的地址路径问题。尤其是在你打包图片生成的路径与html的不在同一个目录时，这个时候就必须用publicPath来指定图频引用径。

manifest

用来引导所有模块的交互。manifest文件包含了加载和处理模块的逻辑。当webpack编译器处理和映射应用代码时，它把模块的详细的信息都记录到了manifest文件中。当模块被打包并运输到浏览器上时，runtime就会根据manifest文件来处理和加载模块。利用manifest就知道从哪里去获取模块代码。

CommonsChunkPlugin

module chunk vender bundle

externals

我们通常在做项目时可能会把第三方库打包到bundle中，如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简单，只需三步。

1.在HTML中引入第三方库的cdn

2.在webpack中配置externals

externals: {
    jquery: "jQuery",
}

3.在js中引用

const $ = require("jquery");
$("#content").html("<h1>hello world</h1>");

resolve

https://www.cnblogs.com/joyco773/p/9049760.html

UglifyJsPlugin

cross-env

script

"build": "webpack  --profile --progress --colors --display-error-details",

• color 输出结果带彩色，比如：会用红色显示耗时较长的步骤
• profile 输出性能数据，可以看到每一步的耗时
• progress 输出当前编译的进度，以百分比的形式呈现
• display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
• display-error-details 输出详细的错误信息

HtmlWebpackPlugin 常见配置

https://github.com/jantimon/html-webpack-plugin

plugin 的执行顺序

CleanWebpackPlugin

devserver 配置

optimization

问题 js更新模块热替换，这是因为按钮的 onclick 事件仍然绑定在旧的 printMe 函数上。

sideEffects

如果所有代码都不包含副作用，我们就可以简单地将该属性标记为 false，来告知 webpack，它可以安全地删除未用到的 export 导出。通过在package.json 配置该项，可以在打包的时候剔除没有引用的代码

--optimize-minimize

在命令行接口中使用 --optimize-minimize 标记，来使用 UglifyJSPlugin。

DefinePlugin

许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。

ExtractTextPlugin

分离css文件

react 懒加载 https://reacttraining.com/react-router/web/guides/code-splitting

webpack 和babel

参看掘金收藏集

Typescript 相关概念

Style-loader 和css-loader

css-loader: 加载.css文件,style-loader:使用``将css-loader内部样式注入到我们的HTML页面

参考：https://blog.csdn.net/TyrionJ/article/details/79288287

NamedModulesPlugin

https://www.webpackjs.com/guides/caching/

HtmlWebpackPlugin

https://segmentfault.com/a/1190000017140363?utm_source=tag-newest

file-loader和url-loader

https://segmentfault.com/a/1190000018987483?utm_source=tag-newest

mini-css-extract-plugin

https://www.jianshu.com/p/e6b25ed1b4cc

devServer proxy

https://www.jianshu.com/p/f489e7764cb8

CleanWebpackPlugin

https://www.jianshu.com/p/dd67a3b64b62

Tsconfig.json

https://juejin.im/post/5e34d967f265da3dfa49bdc3

HtmlWebpackPlugin

HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的js引入到html文件中，此外，如果你需要引入多个JS文件，仅有少数不想引入，还可以指定 excludeChunks 参数，它接受一个数组。

https://juejin.im/post/5ce96ad7e51d455a2f2201e1

common.js esm amd cmd

如何提高dev模式的打包速度

webpack 的hash策略 ，缓存策略，何时缓存何时不缓存。

SpeedMeasurePlugin 会导致开发环境获取hash失败。

splitChunk和runtimechunk

https://www.jianshu.com/p/874760cba102

https://blog.csdn.net/YaoDeBiAn/article/details/104087565

maxInitialRequests是splitChunks里面比较难以理解的点之一，它表示允许入口并行加载的最大请求数，之所以有这个配置也是为了对拆分数量进行限制，不至于拆分出太多模块导致请求数量过多而得不偿失。

webpack maxAsyncRequests

https://www.jianshu.com/p/91e1082bce20

webpack-bundle-analyzer

babel 相关
https://segmentfault.com/a/1190000019718925