写一个自己的前端手脚架(1)

254 阅读2分钟

确认需求

我是react技术栈,所以手脚架生成的工程里必然是有react全家桶的。其余的一些webpack配置我决定参考一下开源的手脚架工具,这个配置应该都是大同小异。借此机会顺便梳理一下。

base.config

  1. html模板(html-webpack-plugin
  2. css提取插件(extract-text-webpack-plugin
  3. 公共模块提取插件(CommonsChunkPlugin
  4. 热更新插件(webpack-hot-middleware
  5. 出入口设置
  6. module里的loader设置。大概包括以下loader:处理js或jsx文件的babel-loader、处理css或less或sass的css-loaderpostcss-loader(没搞懂这两个插件的区别到底是什么,好像css-loader更贴近css本身一些,而postcss-loader是做一些额外的工作)、处理图片的url-loader、处理字体文件的file-loader
  7. 会有一个resolve的配置项告诉我们怎么处理module,alias和extensions这两项都很方便开发

以上就是base.config的基本配置了,下面看一下其他的配置项还有哪些

  1. serverConfig。用于配置服务器跑代码用。这里会用到一个叫做open-browser-webpack-plugin自动打开浏览器的插件
  2. proxyConfig。远程代理的配置项,前后端分离开发,需要跨域请求,用这个配置。
  3. staticConfig。静态服务托管,这个目前没搞懂不知道怎么设置

开发环境的webpack配置

  1. webpack.HotModuleReplacementPlugin,这个插件也是用来做热加载的,网上有人说要和webpack-hot-middleware一起用,没搞懂,研究清楚了在补上。webpack官方文档是写的使用HotModuleReplacementPlugin来处理热加载。
  2. 自动打开浏览器页面。OpenBrowserPlugin
  3. DefinePlugin,用这个创建一个可以编译时期确定的全局常量,会用来做开发环境生产环境的判断

生产环境配置

  1. 代码丑化处理,uglifyJsPlugin
  2. 清理dist目录,CleanWebpackPlugin

这是差不多该有的配置,接下来应该搞定如何写一个手脚架了,准备使用yeoman,下来先做一些准备工作