
获得徽章 5
- code的时候,为什么要做一定的封装,比如 axios 要做进一步的封装呢?
有两个原因:
1.如果不封装,每次请求接口的时候,文件都会对 axios 有引用,如果后期 axios 不维护了,随着浏览器或者webpack 的升级,我们需要更换 axios 为其他的 ajax 包的时候,改动量很大,不便于维护
2.请求接口的时候,涉及携带公共信息(token)的时候,没有封装共享,比如:接口请求的时候携带token过去,不封装就会每次请求都需要写携带token的代码,重复代码量太大展开评论点赞 - webpack 中配置 resolveLoader 是配置 loader 的加载规则,默认是 node_modules 中取,可以自己添加自定义 loader 的位置
{
resolveLoader: {
modules: [
"node_modules",
path.resolve(__dirname, 'loaders')
]
}
}
添加了 loaders 文件夹下是自定义的 loader 文件展开评论点赞 - cross-env 这是一款运行跨平台设置和使用环境变量的脚本,比如:我修改process.env.NODE_ENV 的值
cross-env NODE_ENV=development评论点赞 - webpack 多进程打包,thread-loader 需要把这个 loader 放到要进行多进程打包的 loader 的后面。
注意:开启多进程打包,进程启动大概需要 600ms ,进程通信也有开销。开启多进程打包需要评估当前项目是否需要开启多进程评论点赞 - webpack中通过配置 webpackPrefetch: true 来实现 js 资源的预加载
所谓预加载是浏览器等其他资源加载完毕后,浏览器空闲了,再偷偷加载资源
import 动态导入预发可以实现懒加载1点赞 - code split(代码分隔) 在webpack中是为了把 node_modules 中的引用资源包单独打包出 chunk,减少文件大小,并行加载资源请求,优化性能。可以在 webpack 配置文件中配置
optimization: {
splitChunks: {
chunks: 'all',
},
},
如果需要源码文件也单独打包出来,可以使用 import 的动态导入语法,如:
import(/* webpackChunkName: 'xxx' */ '.xxx').then(()=> {}).catch(() => {})
/* webpackChunkName: 'xxx' */ 这个用来生成打包出来的chunk包的名字展开评论点赞 - webpack的tree shaking 摇晃树,是把在wepack中没有引入(没有用到)的代码不打包处理。但是可能webpack版本导致一些css(import "../xxx.css")等一些文件被认为是没有用到的代码,不进行打包。
可以在package.json中配置 "sideEffects": ["*.css"] ,表示css文件不进行 tree shaking。
"sideEffects": false 表示所有代码都没有副作用(都可以进行tree shaking),.css文件就会被 tree shaking 掉展开等人赞过评论5 - webpack中可以通过配置oneOf来设置一个文件一旦被一个loader处理后,就不再遍历剩下的loader了
{
module: {
//... 其他loader配置
rules: [
{
oneOf: [
//... 其他loader配置
]
}
]
}
}展开1点赞 - 在webpack中使用 html-loader 的时候
如果同时使用了 url-loader
需要把 url-loader 中的配置项 options 中的 esModule设置为 false
{
options: {
esModule: false
}
}展开评论点赞 - 在webpack的module属性的loader配置中
如果一个文件需要经过多个loader进行处理
想优先处理某一个loader
可以在loader的配置中添加 enforce: "pre"
{
test: /\.js$/,
enforce: "pre"
loader: 'eslint-loader'
}
表示先处理这个loader,这个loader正确处理完后再去处理其他loader展开赞过评论1