vue-cli是一个非常好用的vue项目脚手架生成工具，当一个项目从开发环境上线到生产环境时，往往会遇到一些问题：为什么打包出来的文件有2Mb大？为什么页面上的资源加载非常缓慢？为什么有毫不相关的代码被打包到了同一个文件？本文主要针对vue-cli生成的项目，在打包过程中做一些优化。

更多内容，请收藏我的博客：[链接] mocha是比较常用的node测试框架，但是只支持commonjs模块，要让mocha支持ES6模块，需要babel的帮助。 书写本文时用到的工具版本为： babel v7 mocha v6.2 安装依赖 {代码...} babel配置 在package.json或.babelrc中添加配置： {代码...} 配置命令 最后配置运行命令，babel/register会...

用vue和react做开发，我们经常选择vuex，redux一类的状态管理工具来辅助管理状态，状态逻辑复杂的微信小程序，如果有状态管理工具的话，可以极大地提高开发效率和可维护性。

开发小程序时，最麻烦的事情莫过于在上线前需要反复切换测试和正式环境接口地址。 本文介绍一种小程序工程化改造的思路，基于这个我们能够实现小程序自动根据多环境打包。 参考项目 [链接] 准备工作 阅读本文，你需要有对以下内容的基本认知： gulp 环境变量 工程化改造 原生的小程序只有一个简单的启动脚手架，不支持le...

mocha是比较常用的node测试框架，但是只支持commonjs模块，要让mocha支持ES6模块，需要babel的帮助。 书写本文时用到的工具版本为： babel v7 mocha v6.2 安装依赖 {代码...} babel配置 在package.json或.babelrc中添加配置： {代码...} 配置命令 最后配置运行命令，babel/register会绑定到node的require模块，代码运行...

本篇是前文的扩展延伸。 美化webpack输出信息 webpack在开发时的输出信息有一大堆，可能会干扰我们查看信息，以下提供一个美化、精简输出信息的建议。 精简以下开发服务器输出信息，修改webpack.dev.js： {代码...} 美化一下打包输出，安装依赖： {代码...} 修改config/build.js： {代码...} 分别运行打包和开发命令，控...

这一篇主要介绍代码规范相关的内容。 eslint 我们通常使用lint工具来检查代码不规范的地方，以下是将 eslint、typescript 和 webpack 结合使用的例子。 首先安装依赖： {代码...} 然后在根目录新建eslint配置文件.eslintrc.js： {代码...} 我们可能希望检查或不检查某些特定的文件，可以在根目录新建.eslintignore，以下...

更多内容，请收藏我的博客：[链接] 配置webpack开发服务器 打包用的配置基本完成了，现在我们来配置一下开发环境。 首先处理通用配置config.js： {代码...} 然后增加开发配置： {代码...} 在package.json中增加开发环境运行命令： {代码...} 运行npm run dev看看效果吧。 自动寻找空闲端口监听 按照上述配置，如果8080端...

tips: 生产环境需要合理使用缓存，需要拷贝一份同样的配置在webpack.prod.js中，并将name中的hash改为contenthash

在生产环境，我们希望部署新版本后能够丢弃缓存，又希望保留没有被改动的文件的缓存，而在开发环境，我们希望完全不使用缓存，因此我们需要在当前配置的基础上，分别扩展生产和开发两套配置。

这个系列的文章主要讲述如何从一个空目录建立webpack+react+typescript+eslint脚手架，书写此文时各主要工具的版本为：