webpack 项目打包实例应用

[mishe]

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无法构建对应的图片，生产相应的文件

[mishe]

今天增加了模板的压缩loader，这个是由同事基于htmlclean开发的html-clean-loader

loaders: [ { test: /.html$/, loader: "html-clean!html-loader?minimize=false" },

[mishe]

修改图片资源文件不随版本发布，但和打包输出的目录一致都是/dist/images/目录

[huangshuwei]

还是太过简单，资源文件（js、css）没有版本号控制。

[mishe]

pkg.version就是版本号

[huangshuwei]

@mishe 所有的资源都共用一个同一个版本号？这样不利于增量更新。我觉得用[chunkhash]比较好，每一个资源对应一个单独的版本号。可惜现在页面引用我遇到了点问题，正在找答案

[mishe]

修改： 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]' 然后生成的资源css和JS会随主版本，图片资源如果没有修改，就不会生成新的资源文件。