就我了解的前端团队来说，用得最多的应该是grunt和gulp，grunt基本上已经"死"了，因为grunt作者最近已经停止 维护了，基本上在找人接盘，所以，在一段时间内，我们用我们在课堂内学的gulp就满足需求了。时下node社区异常火爆，我们这段时间如果关注一些技术最新动态会发现有browserify,webpack等各种新奇的玩意，观察一些最新的开源项目，我们会慢慢发现，webpack慢慢的有一种在比较最新最热门的前端项目中成为事实标准的感觉，所以我把我的使用过程的步骤贴出来，供同学们如果有兴趣可以玩一下。安装过程：
cnpm install webpack -g
创建一个工程文件夹，初始化npm
npm init
{
"name": "eric",
"version": "1.0.0",
"description": "墨鱼教育",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ericzheng",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.9"
}
}
然后，我们再把webpack以--save-dev的模式安装到我们这个文件夹下面：
cnpm install webpack --save-dev
现在，我们就可以使用webpack了，跟gulp一样，我们要创建一个webpack.config.js如下：
module.exports = {
entry:'./main.js',
output:{
path: './build', // This is where images AND js will go
publicPath: 'http://yoururl.com/', // This is used to generate URLs
filename:'bundle.js'
},
module:{
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
};
webpack 目前为用到的不是很多功能 基本的配置足够满足日常开发需求了，比如 模块化打包 压缩 css js img file 等静态文件的打包、sass的预编译、es6转es5等等这些
Webpack Demo
main.js代码:
require("./1.css");
require("./second.js");
document.write("webpack for the1 win");
second.js
module.exports = document.write("Oh yeah another file");
* @Last Modified by:eric zheng
* @Last Modified time:2015-11-27 18:06:31
* @WebSite:moyu-edu.com
* @Motto:stay foolish stay hungry
*/
body{
background:red;
transition:all ease 10s;
color:white;
}
运行webpack、编译后的代码如下
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "http://yoururl.com/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(1);
__webpack_require__(5);
document.write("webpack for the1 win");
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a