{"action":"created","issue":{"url":"https://api.github.com/repos/mishe/blog/issues/83","labels_url":"https://api.github.com/repos/mishe/blog/issues/83/labels{/name}","comments_url":"https://api.github.com/repos/mishe/blog/issues/83/comments","events_url":"https://api.github.com/repos/mishe/blog/issues/83/events","html_url":"https://github.com/mishe/blog/issues/83","id":125134194,"number":83,"title":"webpack 项目打包实例应用","user":{"login":"mishe","id":1996187,"avatar_url":"https://avatars.githubusercontent.com/u/1996187?v=3","gravatar_id":"","url":"https://api.github.com/users/mishe","html_url":"https://github.com/mishe","followers_url":"https://api.github.com/users/mishe/followers","following_url":"https://api.github.com/users/mishe/following{/other_user}","gists_url":"https://api.github.com/users/mishe/gists{/gist_id}","starred_url":"https://api.github.com/users/mishe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mishe/subscriptions","organizations_url":"https://api.github.com/users/mishe/orgs","repos_url":"https://api.github.com/users/mishe/repos","events_url":"https://api.github.com/users/mishe/events{/privacy}","received_events_url":"https://api.github.com/users/mishe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-06T08:33:10Z","updated_at":"2016-01-29T09:09:30Z","closed_at":null,"body":"webpack 是目前最火的前端集成环境，结合项目实际，编写的如下的node api方式打包配置，具体代码如下：\r\n\r\n```javascript\r\nvar webpack = require(\"webpack\"),\r\n    dev_server = require(\"webpack-dev-server\"),\r\n    ExtractTextPlugin = require(\"extract-text-webpack-plugin\"),\r\n    args = process.argv,\r\n    debug = args.indexOf(\"--debug\") > -1,\r\n    build_realse = args.indexOf(\"--release\") > -1,\r\n    pkg = require(\"./package.json\"),\r\n    logConfig = {\r\n        hash: true,\r\n        version: false,\r\n        assets: true,\r\n        chunks: false,\r\n        chunkModules: false,\r\n        modules: false,\r\n        cached: false,\r\n        reasons: false,\r\n        source: false,\r\n        errorDetails: false,\r\n        chunkOrigins: false,\r\n        modulesSort: false,\r\n        chunksSort: false,\r\n        assetsSort: false\r\n    },\r\n\r\n    _config = {\r\n        entry:{\r\n            app:['./js/main.js'],\r\n            vendor: [\"./js/libs/jquery-2.1.4.min\", \"./js/libs/underscore\", './js/libs/backbone',\"./js/libs/touch\",\"./js/libs/weixin\"]\r\n        },\r\n        output: {\r\n            path: __dirname + \"/dist/\" ,\r\n            filename: pkg.version+\"/bundle\" + (build_realse ? \".min.js\" : \".js\")\r\n        },\r\n        module: {\r\n            loaders: [\r\n                {\r\n                test: /\\.html$/,\r\n                loader: \"html-clean!html-loader?minimize=false\"\r\n            },\r\n            {\r\n                test: /\\.css$/,\r\n                loader: ExtractTextPlugin.extract(\"style-loader\", \"css-loader\")\r\n            },\r\n            {\r\n                test: /\\.(png|jpg|svg|gif|eot|woff|ttf)$/,\r\n                loader: 'file-loader?name=[path]/images/[hash:8].[ext]'\r\n            }]\r\n        }\r\n        , plugins: [\r\n            new ExtractTextPlugin(\"bundle\" + (build_realse ? \".min.css\" : \".css\")),\r\n            new webpack.optimize.CommonsChunkPlugin(\"vendor\", \"vendor.js\")\r\n        ]\r\n    },\r\n    compiler, server;\r\n\r\nif (debug) {\r\n    _config.devtool= 'source-map';\r\n    _config.entry.app.push('webpack/hot/dev-server');\r\n    _config.plugins.push(new webpack.HotModuleReplacementPlugin());\r\n} else if (build_realse) {\r\n    _config.plugins.push(new webpack.optimize.UglifyJsPlugin());\r\n}\r\n\r\ncompiler = webpack(_config);\r\n\r\nif (debug) {\r\n    server = new dev_server(compiler, {\r\n        hot: true\r\n    });\r\n    server.listen(8080, \"0.0.0.0\", function () {\r\n\r\n    });\r\n} else {\r\n    compiler.run(function (err, status) {\r\n        if (err) {\r\n            console.warn(err);\r\n        }\r\n        console.log(status.toJson(logConfig));\r\n    });\r\n}\r\n```\r\n\r\n## 上列包含如下功能：\r\n\r\n* 区分开发模式，打包未压缩模式，打包压缩模式，默认是打包未压缩模式\r\n* 开发模式开启source-map,开启dev-server，可以方便的来调试页面代码，支持实时打包\r\n* 打包分拆app和依赖库2个JS文件（适合app代码不是非常多的情况）\r\n* 如果app代码过大时，可以适当在代码中引入 require.ensure([],fn) 来实现多个app包动态加载\r\n* 引入了extract-text-webpack-plugin插件，可以把所有CSS模块打包成一个独立的css文件\r\n\r\n## 注意：\r\n* css 引用文件必须是相对路径，否则webpack无法构建对应的图片，生产相应的文件"},"comment":{"url":"https://api.github.com/repos/mishe/blog/issues/comments/176653576","html_url":"https://github.com/mishe/blog/issues/83#issuecomment-176653576","issue_url":"https://api.github.com/repos/mishe/blog/issues/83","id":176653576,"user":{"login":"mishe","id":1996187,"avatar_url":"https://avatars.githubusercontent.com/u/1996187?v=3","gravatar_id":"","url":"https://api.github.com/users/mishe","html_url":"https://github.com/mishe","followers_url":"https://api.github.com/users/mishe/followers","following_url":"https://api.github.com/users/mishe/following{/other_user}","gists_url":"https://api.github.com/users/mishe/gists{/gist_id}","starred_url":"https://api.github.com/users/mishe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mishe/subscriptions","organizations_url":"https://api.github.com/users/mishe/orgs","repos_url":"https://api.github.com/users/mishe/repos","events_url":"https://api.github.com/users/mishe/events{/privacy}","received_events_url":"https://api.github.com/users/mishe/received_events","type":"User","site_admin":false},"created_at":"2016-01-29T09:09:29Z","updated_at":"2016-01-29T09:09:29Z","body":"修改图片资源文件不随版本发布，但和打包输出的目录一致都是/dist/images/目录"}}