webpack 是目前最火的前端集成环境，结合项目实际，编写的如下的node api方式打包配置，具体代码如下：
var webpack = require("webpack"),
dev_server = require("webpack-dev-server"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
args = process.argv,
debug = args.indexOf("--debug") > -1,
build_realse = args.indexOf("--release") > -1,
pkg = require("./package.json"),
logConfig = {
hash: true,
version: false,
assets: true,
chunks: false,
chunkModules: false,
modules: false,
cached: false,
reasons: false,
source: false,
errorDetails: false,
chunkOrigins: false,
modulesSort: false,
chunksSort: false,
assetsSort: false
},
_config = {
entry:{
app:['./js/main.js'],
vendor: ["./js/libs/jquery-2.1.4.min", "./js/libs/underscore", './js/libs/backbone',"./js/libs/touch","./js/libs/weixin"]
},
output: {
path: __dirname + "/dist/" ,
filename: pkg.version+"/bundle" + (build_realse ? ".min.js" : ".js")
},
module: {
loaders: [
{
test: /\.html$/,
loader: "html-clean!html-loader?minimize=false"
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/,
loader: 'file-loader?name=[path]/images/[hash:8].[ext]'
}]
}
, plugins: [
new ExtractTextPlugin("bundle" + (build_realse ? ".min.css" : ".css")),
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js")
]
},
compiler, server;
if (debug) {
_config.devtool= 'cheap-module-eval-source-map';
_config.entry.app.push('webpack/hot/dev-server');
_config.plugins.push(new webpack.HotModuleReplacementPlugin());
} else if (build_realse) {
_config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}
compiler = webpack(_config);
if (debug) {
server = new dev_server(compiler, {
hot: true
});
server.listen(8080, "0.0.0.0", function () {
});
} else {
compiler.run(function (err, status) {
if (err) {
console.warn(err);
}
console.log(status.toJson(logConfig));
});
}- 区分开发模式，打包未压缩模式，打包压缩模式，默认是打包未压缩模式
- 开发模式开启source-map,开启dev-server，可以方便的来调试页面代码，支持实时打包
- 打包分拆app和依赖库2个JS文件（适合app代码不是非常多的情况）
- 如果app代码过大时，可以适当在代码中引入 require.ensure([],fn) 来实现多个app包动态加载
- 引入了extract-text-webpack-plugin插件，可以把所有CSS模块打包成一个独立的css文件
- css 引用文件必须是相对路径，否则webpack无法构建对应的图片，生产相应的文件
增加了模板的压缩loader，这个是由同事基于htmlclean开发的html-clean-loader
loaders: [
{
test: /.html$/,
loader: "html-clean!html-loader?minimize=false"
}修改图片资源文件不随版本发布，但和打包输出的目录一致都是/dist/images/目录
修改：
output: {
path: __dirname + "/dist/" ,
filename: "bundle_" +pkg.version+ (build_realse ? ".min.js" : ".js")
}
和图片loader
test: /.(png|jpg|svg|gif|eot|woff|ttf)$/,
loader: 'file-loader?name=[path][hash:8].[ext]'
