# tool-chain > tool-chain base on webpack&gulp Latest version **1.0.0** (published 2017-01-11) · MIT license · 0 weekly downloads ## Install ```sh npm install tool-chain pnpm add tool-chain yarn add tool-chain bun add tool-chain ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2017-01-11 | | First published | 2017-01-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 33 | | Known vulnerabilities | 0 (+3 in 3 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | vk | | Maintainers | valleykid | ## Links - npm: https://www.npmjs.com/package/tool-chain - Repository: https://github.com/valleykid/tool-chain - Homepage: https://github.com/valleykid/tool-chain#readme - Issues: https://github.com/valleykid/tool-chain/issues - npm.io page: https://npm.io/package/tool-chain ## Dependencies (33) - [ip](https://npm.io/package/ip.md) ^1.1.4 - [cors](https://npm.io/package/cors.md) ^2.8.1 - [gulp](https://npm.io/package/gulp.md) ^3.9.1 - [less](https://npm.io/package/less.md) ^2.7.1 - [colors](https://npm.io/package/colors.md) ^1.1.2 - [webpack](https://npm.io/package/webpack.md) ^1.13.3 - [koa-cors](https://npm.io/package/koa-cors.md) 0.0.16 - [babel-core](https://npm.io/package/babel-core.md) ^6.18.2 - [css-loader](https://npm.io/package/css-loader.md) ^0.26.0 - [livereload](https://npm.io/package/livereload.md) ^0.6.0 - [node-fetch](https://npm.io/package/node-fetch.md) ^1.6.3 - [url-loader](https://npm.io/package/url-loader.md) ^0.5.7 - [deep-assign](https://npm.io/package/deep-assign.md) ^2.0.0 - [file-loader](https://npm.io/package/file-loader.md) ^0.9.0 - [gulp-cssmin](https://npm.io/package/gulp-cssmin.md) ^0.1.7 - [gulp-rename](https://npm.io/package/gulp-rename.md) ^1.2.2 - [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^2.0.0 - [html-loader](https://npm.io/package/html-loader.md) ^0.4.4 - [httpolyglot](https://npm.io/package/httpolyglot.md) ^0.1.2 - [less-loader](https://npm.io/package/less-loader.md) ^2.2.3 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.5.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.7 - [gulp-nodemon](https://npm.io/package/gulp-nodemon.md) ^2.2.1 - [style-loader](https://npm.io/package/style-loader.md) ^0.13.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^1.1.1 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.16.0 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.18.0 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.16.0 - [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^1.8.4 - [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.13.2 - [koa-webpack-dev-middleware](https://npm.io/package/koa-webpack-dev-middleware.md) ^1.3.0 - [koa-webpack-hot-middleware](https://npm.io/package/koa-webpack-hot-middleware.md) ^1.0.3 - [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^1.0.1 ## Recent versions - 1.0.0 (latest) — 2017-01-11 ## README # 通用工具链 此工具包是基于gulp+webpack封装而成，提供了`动态编译、热更新、demo动态刷新、demo服务器代理`等功能，可以达到极致顺畅的开发体验~ ### 安装和使用 - step1: ``` npm i tool-chain ``` - step2: ``` // gulpfile.js 工具包中默认提供的命令：webpack/dev const gulp = require('gulp'); const tc = require('tool-chain'); gulp.tasks = tc.gulp.tasks; gulp.task('default', ['dev']); ``` - step3: ``` gulp / gulp dev ``` - demo-node启动，就可以体验顺畅开发了。。。 ### 配置文件.toolchainrc ``` { "name": "" // 工程名，与platform中同名，默认从package.json中取 "tasks": ["library", "webpack"], // 远程gulp任务，默认webpack+min(min任务不用设置) "server": { "watch": "", // gulp-nodemon监听文件夹 "env": { "NODE_ENV": "local" }, // node启动时参数配置 "script": "./examples/bin/server.js" // node启动文件 required }, "proxy": { "hotdomain": "", // 热更新指向域名，默认取本机ip "port": 8800 // node服务器端口 }, "livereload": { "exts": ["xtpl"], // 监听的node端文件类型 "watchPath": "./examples/app/views" // 监听的node端文件夹 } } ``` PS: hotdomain设置可参考[文章](http://forum-archive.vuejs.org/topic/836/webpack-hot-reloading-possible-with-express-server)，大部分场景不需要设置 ### Usage express服务器 ``` // webpackware.js const proxy = require('tool-chain/proxy'); module.exports = function(app) { app.use(proxy.wpdev()); app.use(proxy.wphot()); app.use(proxy.wpcors()); app.set('proxyPort', proxy.port); const livereloadjs = proxy.livereload(); app.use(function(req, res, next){ res.locals.livereloadjs = livereloadjs; next(); }); }; ``` ``` // proxy.route.js const proxy = require('tool-chain/proxy'); module.exports = module.exports = function(app) { proxy.expressRoute(app); }; ``` ``` // app.js ... const app = express(); ... require('./webpackware')(app); require('./routes/router.proxy')(app); ... // const server = http.createServer(app); // 使用http/https协议监听同一个本地端口 const server = proxy.globalServer(app); server.listen(app.get('proxyPort') || process.env.PORT || 8080, function () { console.log('Listening on %j', server.address()); }); ``` ### webpack自定义扩展配置 规定格式： ``` module.exports = { loadersSetting: 'babel, less', //默认四个loader: babel, less, html, url，此处不设置则用默认 module: { loaders: [...] //此处设置会与默认的loader融合 } } ``` 函数格式： ``` // 此处的cfg为包内置webpack配置对象，webpack也是内置的webpack module.exports = function(cfg, webpack) { // 设置externals config.externals = { requirejs: 'requirejs', jquery: 'jQuery', backbone: 'Backbone', underscore: '_', icat: 'ICAT' }; ... }; ``` ### `!import` 打包入口文件 可以在.toolchainrc中设置`entryPath`(默认./src/entry) 或 `libPath`控制打包哪些文件； 如果js中有less引用，会打包出一个同名的css文件; 比如bundle.js作为入口文件，引入了各种饱含less引用的组件，会打包出一个bundle.css libPath主要是考虑第三方非npm包的场景，需要依赖又想单独打包，可以在此处设置 ### License [MIT License](http://www.opensource.org/licenses/mit-license.php) --- _Source: https://npm.io/package/tool-chain · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._