note's People
note's Issues
webpack相关参考文章
-
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
-
UglifyJsPlugin
-
cross-env
-
script
"build": "webpack --profile --progress --colors --display-error-details",
- color 输出结果带彩色,比如:会用红色显示耗时较长的步骤
- profile 输出性能数据,可以看到每一步的耗时
- progress 输出当前编译的进度,以百分比的形式呈现
- display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
- display-error-details 输出详细的错误信息
-
HtmlWebpackPlugin 常见配置
-
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页面 -
NamedModulesPlugin
-
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
-
devServer proxy
-
CleanWebpackPlugin
-
Tsconfig.json
-
HtmlWebpackPlugin
HtmlWebpackPlugin
提供了一个chunks
的参数,可以接受一个数组,配置此参数仅会将数组中指定的js引入到html文件中,此外,如果你需要引入多个JS文件,仅有少数不想引入,还可以指定excludeChunks
参数,它接受一个数组。 -
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
-
webpack-bundle-analyzer
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.