快速使用 PWA
根据官网上的推荐简单配置一下就行了。
配置 typescript
使用第三方库时,需要安装对应的类型库,不然不会提示。比如@types/jquery
,可以在如下网站中查看有哪些 types
http://microsoft.github.io/TypeSearch/
单页面路由访问提示找不到资源
比如我们使用的是单页面模式,BrowserRouter
的方式,当我们根据路由去访问页面时,可能会提示找不到资源的情况,比如访问http://localhost:8000/list
,提示找不到list
;因为是单页面应用,所以只有 index.html 页面
配置 devServer 来解决
1 | historyApiFallback: true; |
ESLint 5-6
首先安装,然后使用
检测 src 目录下的代码是否符合规范
1 | npx eslint src |
webpack 结合 eslin
如果编辑器没有安装 eslint 插件,编辑器就无法检查代码规范。因此可以在 webpack 中配置 loader 来解决。
1 | rules:{ |
这样在每次打包的时候就会在打包信息中显示不符合规范的地方,但是这样和直接运行npx eslint src
一样,错误信息在控制台输出中,不方便发现。
可以通过配置 devServer 的 overlay 来解决这个问题。
1 | devServer:{ |
配置了 overlay,如果代码不符合 eslint 规范,编译后,页面会弹出下面的页面!每当修改掉一个 error,就会自动刷新。
使用 git 钩子来检测代码规范
当提交带的时候,通过 git 钩子来对代码进行规范检测。
提升 webpack 打包速度
1.跟上技术迭代(升级 node、Npm、Yarm 版本) 2.在尽可能少的模块上应用 loader
善于使用 exclude 和 include,图片没必要使用,因为所有的图片都需要进行打包处理。
3.plugin 尽可能精简并确保可靠
4.resolve 参数合理配置
比如配置了多个extensions
1 | resolve: { |
上面的配置,当引入一个没写后缀的文件时,会先去找对应名称的 css,然后 jpg,依次往下匹配,直到匹配到,这样的话,如果配置的后缀比较多,肯定会影响效率。
所以建议配置逻辑代码的文件,资源类的最好在引入时写全后缀。
mainFiles 指定默认加载文件,默认是 index,当我们引入自定义组件时,通常引入到文件夹就行了,就是因为这个配置。
1 | resolve: { |
这个属性同样有上面性能问题。
自定义 loader
其实 loader 就是一个函数,函数会接收被执行文件的内容,然后在 loader 中对内容做处理即可。
下面是一个自定义loader
1 | //不要使用箭头函数,this的指向会出现问题。loader中的this需要绑定webpack响应的上下文 |
上面就是一个简单的 loader 开发完成,然后在 webapack 中配置即可
1 | module: { |
打完包后,js
文件中所欲的eluanshi
都会被替换成wenmu
如果返回值是多个,则需要用到callback
函数
异步方法
1 | const callback = this.async(); |
自定义 plugin
loader 是一个方法,plugin 是一个类。因为在使用的时候需要 new 一个实例。
调试开发的 plugin,使用 node 的调试,配置一个新的命令
1 | "scripts":{ |
- inspect 开启调试模式
- inspect-brk 在代码第一行截住
并且可以在代码中使用debugger
什么时候执行 resolve?
当引入一个模块时,会执行 resolve 中的配置。
什么时候执行 resolveLoader
和 resolve 类似,这个是当引入 loader 的时候,执行里面的配置。