湫水先生
前端开发工程师
学无止境
获得徽章 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