boarder,快速开始一个 webpack 项目

515 阅读2分钟
原文链接: github.com

现在许多的项目都是基于webpack来构建的,并且自从webpack提供了中文官网后友好度大大的提高了,但是有些时候想快速开始一个webpack项目却只能把之前项目的一些config配置拿过来改改显得有点麻烦,所以写了一个简易的脚手架(真的很简易!!!)

安装:

$ npm install boarder -g

使用:

$ boarder init <项目名>
$ cd <项目名>
$ npm install
$ npm run dev

初始化的结构目录是这样子的

├── README.md
├── build
│   ├── webpack.base.js
│   ├── webpack.build.js
│   └── webpack.dev.js
├── dist
│   ├── index.html
│   └── static
│       └── js
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── index.html
    └── index.js

目录结构还是很简单的

  1. build存放着构建相关的代码
  2. src存放着开发相关的代码,初始化了两个文件index.htmlindex.js,index.js是项目的主入口,如果index.js这个名字不喜欢,那么你修改了最后也要把build-webpack.base.js里面entry的入口名字改掉

功能实现:

  • 支持ES6写法,通过Babel来转换
  • 支持小图片自动转Base64
  • 支持业务和依赖代码的分离
  • 支持热更新
  • 支持Sass,Stylus或者Less
  • 优化构建速度

css预处理器本身不太想集成,因为每个业务中需要用到的预处理器都是不一样的,但是考虑到常用的预处理器就那么几种,所以接下来也会集成

构建的速度肯定是需要优化的,本身boarder这个包初始化还不是很完善,其实我只要一个目的就是当你没有明确用的框架的时候boarder init一个是可以快速来生成一个webpack项目的,如果有明确的框架,肯定是框架同款的cli好用,比如vue-cling-cli这些

如果你在项目中使用boarder有相关的问题可以给我提issues
boarder issues
webpack模板 issues