{"action":"opened","issue":{"url":"https://api.github.com/repos/powerzywin/blog/issues/1","repository_url":"https://api.github.com/repos/powerzywin/blog","labels_url":"https://api.github.com/repos/powerzywin/blog/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/powerzywin/blog/issues/1/comments","events_url":"https://api.github.com/repos/powerzywin/blog/issues/1/events","html_url":"https://github.com/powerzywin/blog/issues/1","id":137762158,"number":1,"title":"webpack实践","user":{"login":"powerzywin","id":17560711,"avatar_url":"https://avatars.githubusercontent.com/u/17560711?v=3","gravatar_id":"","url":"https://api.github.com/users/powerzywin","html_url":"https://github.com/powerzywin","followers_url":"https://api.github.com/users/powerzywin/followers","following_url":"https://api.github.com/users/powerzywin/following{/other_user}","gists_url":"https://api.github.com/users/powerzywin/gists{/gist_id}","starred_url":"https://api.github.com/users/powerzywin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/powerzywin/subscriptions","organizations_url":"https://api.github.com/users/powerzywin/orgs","repos_url":"https://api.github.com/users/powerzywin/repos","events_url":"https://api.github.com/users/powerzywin/events{/privacy}","received_events_url":"https://api.github.com/users/powerzywin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-03-02T03:35:39Z","updated_at":"2016-03-02T03:35:39Z","closed_at":null,"body":"**Module API使用**\r\n•\trequire(dependency: String) \r\n同步加载模块，由webpack编译时确保依赖\r\n\r\n•\tdefine([name: String], [dependencies: String[]], factoryMethod: function(...))\r\n同步加载依赖并定义模块，由webpack编译时确保依赖\r\n\r\n•\tmodule.exports/exports\r\n定义模块出口对象\r\n\r\n•\trequire.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) \r\nrequire(dependencies: String[], [callback: function(...)])\r\n请求服务器动态异步加载模块，前者同时还可以创建一个chunk\r\n\r\nrequire.ensure会创建一个code split，其中的依赖会作为动态模块加载，书写方式如下\r\nrequire.ensure([], function(require){ \r\nvar dialog = require('./components/dialog'); \r\nvar tab = require('./components/tab); \r\n……\r\n});\r\n\r\n**配置文件**\r\n•\tWebpack的配置主要为了这几大项目：\r\nentry：js入口源文件\r\noutput：生成文件\r\nmodule：进行字符串的处理\r\nresolve：文件路径的指向\r\nplugins：插件，比loader更强大，能使用更多webpack的api\r\n\r\n•\t常用Loaders介绍\r\n处理样式，转成css，如：less-loader, sass-loader\r\n图片处理，如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中\r\n处理js，将es6或更高级的代码转成es5的代码。如： babel-loader，babel-preset-es2015，babel-preset-react\r\n将js模块暴露到全局，如果expose-loader\r\n\r\n•\t常用Plugins介绍\r\n代码热替换, HotModuleReplacementPlugin\r\n生成html文件，HtmlWebpackPlugin\r\n将css成生文件，而非内联，ExtractTextPlugin\r\n报错但不退出webpack进程，NoErrorsPlugin\r\n代码压缩混淆，UglifyJsPlugin，开发过程中不建议打开\r\n多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin\r\n清理文件夹，Clean\r\n调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来  \r\n\r\n**配置文件设置**\r\n•\toutput.publicPath设置CDN路径，也是chunk对资源文件的的引用路径\r\n\r\n加载相应的文件需要安装相应的loader\r\n•\t安装css loader\r\nnpm install css-loader style-loader\r\n配置\r\n { test: /\\.css$/, loader: 'style-loader!css-loader' }\r\n\r\n•\t安装html loader\r\nnpm install html-loader\r\n配置\r\n{ test: /\\.html$/, loader: \"html\" }\r\n\r\n•\t安装mustache-loader\r\nnpm install mustache-loader\r\n配置\r\n{ test: /\\.html$/, loader: \"mustache\" }\r\n\r\n•\t安装url-loader，处理图片的引用\r\nnpm install url-loader\r\n配置\r\n{test: /\\.(png|jpg)$/, loader: 'url-loader?limit=8192'}\r\n\r\n•\t安装expose-loader，把模块暴露到全局使用\r\nnpm install expose-loader\r\n一般配置\r\n{test:path.join(config.path.src,'/js/common/report'), loader:'expose?report'}\r\n公用模块配置\r\n{test: require.resolve(\"jquery\"), loader: 'expose?$'}\r\n\r\n\r\n•\t配置字体等相关loader，需安装file-loader\r\nnpm install file-loader\r\n{ test: /\\.(woff|woff2|eot|ttf|svg)(\\?.*$|$)/, loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' }\r\n\r\n\r\n使用plugin处理构建相关操作\r\nplugins: [\r\n        new webpack.optimize.CommonsChunkPlugin('common.js'),\r\n        new webpack.optimize.MinChunkSizePlugin()\r\n    ]\r\n•\tCommonsChunkPlugin用于提取公共模块\r\n使用new webpack.optimize.CommonsChunkPlugin({\r\n    name:\"common\",\r\n    filename:\"js/common.js\",\r\n    chunks:['index','detail]\r\n})\r\n\r\n•\tMinChunkSizePlugin用于压缩chunk文件\r\n\r\n•\tHtmlWebpackPlugin 生成html文件并插入依赖的引用，使用npm install html-webpack-plugin安装\r\n定义var HtmlWebpackPlugin = require('html-webpack-plugin'); \r\n使用  new HtmlWebpackPlugin(); \r\n指定template参数，可以根据指定文件生成，而不是一个全新的。\r\n\r\n•\tclean plugin清除目录，使用npm install clean-webpack-plugin安装\r\n定义var CleanWebpackPlugin = require('clean-webpack-plugin'); \r\n使用new CleanWebpackPlugin(['dist', 'build'],options);\r\n\r\n•\t热替换，使用npm install webpack-dev-server安装\r\n入口文件配置中加入'webpack/hot/dev-server'，加入'webpack-dev-server/client?http://localhost:8081/'指定端口，使用命令webpack-dev-server --hot --quiet启动\r\n\r\n•\t单独打包css\r\nExtractTextPlugin.extract('style-loader', 'css!less')\r\n\r\n\r\n配置实例\r\nvar webpack = require('webpack'),\r\n    path = require('path'),\r\n    HtmlWebpackPlugin = require('html-webpack-plugin'),\r\n    CleanWebpackPlugin = require('clean-webpack-plugin');\r\nmodule.exports = {\r\n    entry: {\r\n        vendor: ['framework7', 'jquery', 'fastclick', 'mustache'],\r\n        index: ['webpack-dev-server/client?http://localhost:8081/',\r\n            'webpack/hot/dev-server',\r\n            './app/index.js']\r\n    },\r\n    output: {\r\n        path: 'dist',\r\n        //publicPath: 'dist',\r\n        filename: 'js/[name]_[hash]_bundle.js'\r\n    },\r\n    module: {\r\n        loaders: [\r\n            { test: /\\.css$/, loader: 'style-loader!css-loader' },\r\n            { test: /\\.html$/, loader: \"mustache\" },\r\n            { test: /\\.(png|jpg)$/, loader: 'url-loader?limit=8192' },\r\n            { test: /\\.(woff|woff2|eot|ttf|svg)(\\?.*$|$)/, loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' },\r\n            { test: require.resolve(\"jquery\"), loader: 'expose?$' }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new webpack.HotModuleReplacementPlugin(),\r\n        new webpack.optimize.CommonsChunkPlugin({ name: \"vendor\", filename: \"js/vendor_[hash].js\" }),\r\n        new HtmlWebpackPlugin({ filename: 'index.html', inject: 'body', template: './app/index.html' }),\r\n        new CleanWebpackPlugin(['dist'])\r\n        //new webpack.optimize.MinChunkSizePlugin()\r\n    ]\r\n};\r\n"}}