{"action":"closed","issue":{"url":"https://api.github.com/repos/buildGoodWeb/webpack_collect/issues/3","repository_url":"https://api.github.com/repos/buildGoodWeb/webpack_collect","labels_url":"https://api.github.com/repos/buildGoodWeb/webpack_collect/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/buildGoodWeb/webpack_collect/issues/3/comments","events_url":"https://api.github.com/repos/buildGoodWeb/webpack_collect/issues/3/events","html_url":"https://github.com/buildGoodWeb/webpack_collect/issues/3","id":169309092,"number":3,"title":"webpack-doc: Usage （使用）","user":{"login":"wangkailang","id":6942517,"avatar_url":"https://avatars.githubusercontent.com/u/6942517?v=3","gravatar_id":"","url":"https://api.github.com/users/wangkailang","html_url":"https://github.com/wangkailang","followers_url":"https://api.github.com/users/wangkailang/followers","following_url":"https://api.github.com/users/wangkailang/following{/other_user}","gists_url":"https://api.github.com/users/wangkailang/gists{/gist_id}","starred_url":"https://api.github.com/users/wangkailang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wangkailang/subscriptions","organizations_url":"https://api.github.com/users/wangkailang/orgs","repos_url":"https://api.github.com/users/wangkailang/repos","events_url":"https://api.github.com/users/wangkailang/events{/privacy}","received_events_url":"https://api.github.com/users/wangkailang/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-04T07:29:43Z","updated_at":"2016-08-04T07:59:04Z","closed_at":"2016-08-04T07:59:04Z","body":"> When building a real application, it's more advisable to install webpack as a devDependency of your project.\r\n\r\n```javascript\r\nnpm install --save-dev webpack\r\n```\r\n## Project Strcture（项目文件目录组合结构）\r\nIn webpack projects, we'll separate files from bundled files by organizing them in folders. For example, we'll put the source file in `src`,and bundled files in `bin`\r\n\r\n![project-structure](https://cloud.githubusercontent.com/assets/6942517/17393860/c3ddb9c8-5a58-11e6-8502-39952378b488.png)\r\n\r\nThere are many project structures.Some project use `app` instead of `src`.Some project use `dist `or `build` instead of `bin`.Projects with tests usually use `test, tests,spec,specs` or colocate the test files in the source folder.\r\n\r\n```javascript\r\n// mkdir bin\r\n// mkdir src\r\n\r\n// src/cats.js\r\nvar cats = ['cat1', 'cat2', 'cat3'];\r\nmodule.exports = cats;\r\n\r\n// src/app.js (Entery Point)\r\ncats = require('./cats.js');\r\nconsole.log(cats);\r\n\r\n// npm init \r\n// npm install --save-dev webpack\r\n\r\n// touch webpack.config.js\r\nmodule.export = {\r\n  entry: './src/app.js',\r\n  output: {\r\n    path: './bin',\r\n    filename: 'app.bundle.js'\r\n  }\r\n};\r\n// run => webpack\r\n// node bin/app.bundle.js \r\n// output: ['cat1', 'cat2', 'cat3']\r\n```\r\n\r\n### Using loaders support es6\r\n```javascript\r\n// Install Babel and the presets\r\nnpm install --save-dev babel-core babel-preset-es2015\r\n\r\n// Install babel-loader\r\nnpm install --save-dev babel-loader\r\n\r\n// Configure Babel to use these presets by add `.babelrc`\r\n{ \"presets\": [\"ES2015\"] }\r\n\r\n// webpack.config.js\r\nmodule.export = {\r\n  entry: './src/app.js',\r\n  output: {\r\n    path: './bin',\r\n    filename: 'app.bundle.js'\r\n  },\r\n  module: {\r\n    loaders: [{\r\n      test: /\\.js$/,\r\n      exclude: /node_modules/,\r\n      loader: 'babel-loader',\r\n    }]\r\n  }\r\n}\r\n\r\n// Install the libraries\r\nnpm install --save jquery babel-polyfill\r\n\r\n// Edit src/app.js\r\nimport 'babel-polyfill';\r\nimport cats from './cats';\r\nimport $ from 'jquery';\r\n\r\n$('<h1>Cats</h1>').appendTo('body');\r\nconst ul = $('<ul></ul>').appendTo('body');\r\nfor (const cat of cats) {\r\n  $('<li></li>').text(cat).appendTo(ul);\r\n}\r\n\r\n// Add index.html\r\n <!DOCTYPE html>\r\n <html>\r\n     <head>\r\n         <meta charset=\"utf-8\">\r\n     </head>\r\n     <body>\r\n         <script src=\"bin/app.bundle.js\" charset=\"utf-8\"></script>\r\n     </body>\r\n </html>\r\n\r\n// run => webpack\r\n// open index.html\r\n```"}}
{"actor":{"display_login":"wangkailang"}}