一个简单的例子，明白了是怎么操作，文件怎么制作的。在我看来和gulp／grunt区别不算太大，但很多人都说比较好，先进多了
WebPack
官网地址： http://webpack.github.io/
安装： #npm install -g webpack
或 #npm install webpack -g
如果是linux／mac 可以用 ＃sudo npm install -g webpack
创建工程
（1）创建目录并进入目录
#mkdir webpack_test && cd webpack_test
（2）创建package.json
＃nam init
//一路回车就行
(3)下载 工程的webpack
＃npm install webpack --save-dev
# npm install jsx-loader --save-dev //react jsx
# npm install style-loader --save-dev //style // style css less都有依赖
# npm install css-loader --save-dev // css
# npm install less-loader --save-dev //less 加载
less
(4)创建webpack.config.js 文件
＃touch webpack.config.js
(5)编辑webpack.config.js 文件
＃vi webpack.config.js
var webpack = require('webpack');
// var less = require('less');
module.exports = {
/**
* [context description]base目录
* @type {String}
*/
context:__dirname+"/src/",
/**
* [entry description] 模块入口
* @type {String 或 Array 或 Object}
* 值可以省略后缀 .js
*/
entry: './index',
/**
* [output description]设置输入目录和文件名
* 可以设置
* @type {Object}
*/
output:{
path:"./dist",
filename:"[name].min.js"
},
/**
* [module description]加载器配置
* @type {Object} 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载
*/
module:{
loaders:[
{
test:/.less$/,loader: "style!css!less"
}
]
},
/**
* [resolve description] 配置别名
* @type {Object}
*/
resolve:{
alias:{
}
},
/**
* [plugins description]插件
* @type {Object}
*/
plugins:{
}
}
创建js文件
＃mkdir src && cd src
# touch index.js
#vi index.js
console.log("Hello World!");
#webpack
#touch main.less
#vi main.less
@bg: #eee;
@fontSize: 40px;
body{
background:@bg;
font-size:@fontSize;
}
#vi index.js
添加require("./main.less");
执行
＃webpack --display-error-details -w //清楚查看错误
或
＃webpack
对于配置express＋webpack
我从github上下载了一个例子
网址：https://github.com/kenanpengyou/express-webpack-full-live-reload-example.git
下载后
进入目录
＃npm install
完成后
* `npm start` to develop with full live reload.
* `npm run browsersync` is a alternative for development. It may be faster when modifying the express views
(templates) only.
* `npm run production` to emit outputs and run the express for production.
* `npm run build` if you care about what is hold in memory for development...
源码：链接: https://pan.baidu.com/s/1boFCxJL 密码: itn8