├── .gitignore
├── LICENSE
├── README.md
├── ko-arahansa
    ├── README.md
    ├── part1
    │   ├── README.md
    │   ├── css-extract
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── changeColor.js
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   ├── example1
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── APIStuff.js
    │   │   │   ├── UIStuff.js
    │   │   │   ├── extraFile.js
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example2
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   └── index.js
    │   │   └── webpack.config.js
    │   ├── example3
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   └── index.js
    │   │   └── webpack.config.js
    │   ├── example4
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example5
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example6
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   ├── example7
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   └── html-reload
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │       ├── index.html
    │   │       ├── index.js
    │   │       └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    └── part2
    │   ├── README.md
    │   └── example1
    │       ├── .babelrc
    │       ├── .eslintrc
    │       ├── package.json
    │       ├── src
    │           ├── index.html
    │           ├── index.js
    │           └── styles.css
    │       ├── webpack.config.dev.js
    │       └── webpack.config.prod.js
├── part1
    ├── README.md
    ├── css-extract
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── changeColor.js
    │   │   ├── index.html
    │   │   ├── index.js
    │   │   └── styles.css
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
    ├── example1
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── APIStuff.js
    │   │   ├── UIStuff.js
    │   │   ├── extraFile.js
    │   │   ├── index.js
    │   │   └── styles.css
    │   └── webpack.config.js
    ├── example2
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   └── index.js
    │   └── webpack.config.js
    ├── example3
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   └── index.js
    │   └── webpack.config.js
    ├── example4
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── index.html
    │   │   ├── index.js
    │   │   └── styles.css
    │   └── webpack.config.js
    ├── example5
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── index.html
    │   │   ├── index.js
    │   │   └── styles.css
    │   └── webpack.config.js
    ├── example6
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── index.html
    │   │   ├── index.js
    │   │   └── styles.css
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
    ├── example7
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │   │   ├── index.html
    │   │   ├── index.js
    │   │   └── styles.css
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
    └── html-reload
    │   ├── README.md
    │   ├── package.json
    │   ├── src
    │       ├── index.html
    │       ├── index.js
    │       └── styles.css
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
├── part2
    ├── README.md
    └── example1
    │   ├── .babelrc
    │   ├── .eslintrc
    │   ├── package.json
    │   ├── src
    │       ├── index.html
    │       ├── index.js
    │       └── styles.css
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
├── zh-TW
    ├── README.md
    ├── part1
    │   ├── README.md
    │   ├── css-extract
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── changeColor.js
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   ├── example1
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── APIStuff.js
    │   │   │   ├── UIStuff.js
    │   │   │   ├── extraFile.js
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example2
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   └── index.js
    │   │   └── webpack.config.js
    │   ├── example3
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   └── index.js
    │   │   └── webpack.config.js
    │   ├── example4
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example5
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   └── webpack.config.js
    │   ├── example6
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   ├── example7
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │   │   ├── index.html
    │   │   │   ├── index.js
    │   │   │   └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    │   └── html-reload
    │   │   ├── README.md
    │   │   ├── package.json
    │   │   ├── src
    │   │       ├── index.html
    │   │       ├── index.js
    │   │       └── styles.css
    │   │   ├── webpack.config.dev.js
    │   │   └── webpack.config.prod.js
    └── part2
    │   ├── README.md
    │   └── example1
    │       ├── .babelrc
    │       ├── .eslintrc
    │       ├── package.json
    │       ├── src
    │           ├── index.html
    │           ├── index.js
    │           └── styles.css
    │       ├── webpack.config.dev.js
    │       └── webpack.config.prod.js
└── zh-cn
    ├── README.md
    ├── part1
        ├── README.md
        ├── css-extract
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── changeColor.js
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── styles.css
        │   ├── webpack.config.dev.js
        │   └── webpack.config.prod.js
        ├── example1
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── APIStuff.js
        │   │   ├── UIStuff.js
        │   │   ├── extraFile.js
        │   │   ├── index.js
        │   │   └── styles.css
        │   └── webpack.config.js
        ├── example2
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   └── index.js
        │   └── webpack.config.js
        ├── example3
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   └── index.js
        │   └── webpack.config.js
        ├── example4
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── styles.css
        │   └── webpack.config.js
        ├── example5
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── styles.css
        │   └── webpack.config.js
        ├── example6
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── styles.css
        │   ├── webpack.config.dev.js
        │   └── webpack.config.prod.js
        ├── example7
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── styles.css
        │   ├── webpack.config.dev.js
        │   └── webpack.config.prod.js
        └── html-reload
        │   ├── README.md
        │   ├── package.json
        │   ├── src
        │       ├── index.html
        │       ├── index.js
        │       └── styles.css
        │   ├── webpack.config.dev.js
        │   └── webpack.config.prod.js
    └── part2
        ├── README.md
        └── example1
            ├── .babelrc
            ├── .eslintrc
            ├── package.json
            ├── src
                ├── index.html
                ├── index.js
                └── styles.css
            ├── webpack.config.dev.js
            └── webpack.config.prod.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | bundle.js
4 | npm-debug.log*
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Aria Fallah
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Beginner Webpack Tutorial :school:
 2 | 
 3 | Starting off with webpack was hard for me. I want to create a beginner friendly and comprehensive
 4 | intro to webpack.
 5 | 
 6 | - [Part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1) - Webpack Basics and configuration.
 7 | - [Part 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part2) - Babel, linting, and environment variables.
 8 | 
 9 | ### Translations
10 | - [Chinese Traditional](https://github.com/AriaFallah/WebpackTutorial/tree/master/zh-TW)
11 | - [简体中文](./zh-cn)
12 | 


--------------------------------------------------------------------------------
/ko-arahansa/README.md:
--------------------------------------------------------------------------------
1 | # 입문자를 위한 Webpack 튜토리얼 :school:
2 | 
3 | 웹팩을 시작하는 것은 나에게 매우 힘들었지. 난 그래서 웹팩 입문자를 위한 친절하고 이해하기 쉬운 자료를 만들고 싶었어.
4 | 
5 | - [Part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/ko-arahansa/part1) - 웹팩 기초와 설정을 다룬다. 
6 | - [Part 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/ko-arahansa/part2) - Babel, linting과 환경 변수들
7 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/README.md:
--------------------------------------------------------------------------------
 1 | # Extra - Extract Your CSS
 2 | 
 3 | 예. 당신이 마쳤습니다만, production 에서는 css 파일이 javascript안에 들어가기를 원하지 않습니다. 이러한 목적을 위해서 우리는 
 4 | [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin).
 5 | 을 사용할 것입니다. 
 6 | 
 7 |     npm install --save-dev extract-text-webpack-plugin
 8 | 
 9 | 그리고 우리의 웹팩 production설정을 다음과 같이 바꿔줘야합니다 : 
10 | 
11 | ```javascript
12 | var path = require('path')
13 | var webpack = require('webpack')
14 | var HtmlWebpackPlugin = require('html-webpack-plugin')
15 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
16 | 
17 | module.exports = {
18 |   devtool: 'source-map',
19 |   entry: ['./src/index'],
20 |   output: {
21 |     path: path.join(__dirname, 'dist'),
22 |     filename: 'bundle.js'
23 |   },
24 |   plugins: [
25 |     new webpack.optimize.UglifyJsPlugin({
26 |       compressor: {
27 |         warnings: false,
28 |       },
29 |     }),
30 |     new webpack.optimize.OccurenceOrderPlugin(),
31 |     new HtmlWebpackPlugin({
32 |       template: './src/index.html'
33 |     }),
34 |     new ExtractTextPlugin("styles.css")
35 |   ],
36 |   module: {
37 |     loaders: [{
38 |       test: /\.css$/,
39 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
40 |     }]
41 |   }
42 | }
43 | ```
44 | 
45 | 이러한 변화는 [official-repo](https://github.com/webpack/extract-text-webpack-plugin) 에서 유래했습니다. 어떻게 이것이 동작하는 지 알고 싶다면 한번 살펴보세요.
46 | 
47 | > 엔트리 청크에서 모든 require("style.css")들은 분리된 css 아웃풋 파일로 이동합니다. 그러니 당신의 스타일들은 더 이상 자바스크립트 안에 들어가지않고 css 번들파일안에 들어가게 됩니다. 만약 당신의 전체적인 스타일 시트 볼륨이 크다면, 이게 더 빠를 겁니다. 왜냐하면 스타일시트번들은 자바스크립트 번들과 병렬로 불러와지기 때문입니다.
48 | 
49 | 이제 당신이 `npm run build`를 하면 설정을 사용하여 CSS는 분리된 파일로 들어가게 되고, 흥미롭게도 이미 `inde.html`에 포함(include)될 것입니다. 
50 | ```html
51 | <html>
52 | <head>
53 |   <title>Webpack Tutorial</title>
54 | <link href="styles.css" rel="stylesheet"> <------ MAGICALLY ADDED
55 | </head>
56 | <body>
57 |   <h1>Very Website</h1>
58 |   <section id="color"></section>
59 |   <button id="button">Such Button</button>  
60 | <script src="bundle.js"></script></body>
61 | </html>
62 | ```
63 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-extract",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "extract-text-webpack-plugin": "^1.0.1",
16 |     "html-webpack-plugin": "^2.8.1",
17 |     "style-loader": "^0.13.0",
18 |     "webpack": "^1.12.13",
19 |     "webpack-dev-server": "^1.14.1"
20 |   },
21 |   "dependencies": {
22 |     "pleasejs": "^0.4.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/src/changeColor.js:
--------------------------------------------------------------------------------
 1 | var Please = require('pleasejs')
 2 | var div = document.getElementById('color')
 3 | var button = document.getElementById('button')
 4 | 
 5 | function changeColor() {
 6 |   div.style.backgroundColor = Please.make_color()
 7 |   console.log('pls do work')
 8 | }
 9 | 
10 | button.addEventListener('click', changeColor)
11 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./changeColor.js')
3 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/css-extract/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 | 
 6 | module.exports = {
 7 |   devtool: 'source-map',
 8 |   entry: ['./src/index'],
 9 |   output: {
10 |     path: path.join(__dirname, 'dist'),
11 |     filename: 'bundle.js'
12 |   },
13 |   plugins: [
14 |     new webpack.optimize.UglifyJsPlugin({
15 |       compressor: {
16 |         warnings: false,
17 |       },
18 |     }),
19 |     new webpack.optimize.OccurrenceOrderPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     }),
23 |     new ExtractTextPlugin("styles.css")
24 |   ],
25 |   module: {
26 |     loaders: [{
27 |       test: /\.css$/,
28 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/README.md:
--------------------------------------------------------------------------------
 1 | # Example 1 - Bundling and Loaders
 2 | 
 3 | ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 4 | 
 5 | 번들링  [예제 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/ko-arahansa/part1/example1)
 6 | 
 7 | ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 8 | 
 9 | 웹팩은 공식적으로 모듈 번들러로 얘기됩니다.만약 당신이 좀 더 모듈과 모듈번들링에 대해서 깊이 있는 정보를 원한다면 여기 두개의 무척 좋은 글을 읽어보세요 
10 | [here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
11 | and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
12 | 
13 | 우리는 단순하게 갈 것입니다. 이것이 동작하는 방식은 당신이 하나의 파일을 엔트리 포인트로 설정하는 것입니다. 
14 | 이 파일은 당신의 트리의 root가 될 것인데 당신이 다른 파일로부터 파일을 `require` 할 때마다 이 트리에 추가가 되게 됩니다. 당신이 `webpack`을 치면 모든 이러한 파일/모듈들은 하나의 단일 파일로 번들링되게 됩니다. 
15 | 
16 | 여기 예제가 있습니다. : 
17 | 
18 | ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
19 | 
20 | 이 사진은 디렉터리를 보여줍니다 :
21 | 
22 | ```
23 | MyDirectory
24 | |- index.js
25 | |- UIStuff.js
26 | |- APIStuff.js
27 | |- styles.css
28 | |- extraFile.js
29 | ```
30 | 
31 | 그리고 이것은 당신의 파일의 내용을 보여줍니다.
32 | 
33 | ```javascript
34 | // index.js
35 | require('./styles.css')
36 | require('./UIStuff.js')
37 | require('./APIStuff.js')
38 | 
39 | // UIStuff.js
40 | var React = require('React')
41 | React.createClass({
42 |   // stuff
43 | })
44 | 
45 | // APIStuff.js
46 | var fetch = require('fetch') // fetch polyfill
47 | fetch('https://google.com')
48 | ```
49 | 
50 | ```css
51 | /* styles.css */
52 | body {
53 |   background-color: rgb(200, 56, 97);
54 | }
55 | ```
56 | 
57 | 만약 당신이 `webpack` 을 치면 당신은 이 계층구조가 가진 내용들의 번들을 받게 됩니다. 하지만 같은 폴더 내에 있어도 `required`되지 않은 `extraFile.js`은 번들링에 포함되지 않게 됩니다. 
58 | 
59 | `bundle.js` 는 다음과 같을 것입니다 : 
60 | 
61 | ```javascript
62 | // contents of styles.css
63 | // contents of UIStuff.js + React
64 | // contents of APIStuff.js + fetch
65 | ```
66 | 
67 | 번들되는 것은 당신이 명시적으로 required 한 것들만 번들링됩니다. 
68 | 
69 | ### Loaders
70 | 
71 | (로더) 당신은 아마 눈치 챘겠지만, 위의 예제에서 제가 뭔가 이상한 것을 했었습니다. 저는 자바스크립트 파일에 css파일을 `required` 했습니다.
72 | 
73 | 자바스크립트 이외의 것들을 `require` 할 수 있다는 것은 웹팩에서 꽤 좋으면서 흥미롭습니다. 
74 | 웹팩에서는 로더라는 것이 존재하는 데, 이러한 로더들을 사용하여서 당신은  `.css` 와 `.png`, `.html` 파일들 같은 것 무엇이든지 `require`할 수 있습니다. 
75 | 
76 | 예로, 위의 다이어그램에서
77 | 
78 | ```javascript
79 | // index.js
80 | require('./styles.css')
81 | ```
82 | 
83 | 만약 제가 웹팩설정에 [the style-loader](https://github.com/webpack/style-loader) 와  [the css-loader](https://github.com/webpack/css-loader)를 추가하는 것은 유효할 뿐만 아니라, 제 페이지에 실제로 적용될 것입니다. 
84 | 
85 | 이것은 당신이 웹팩을 가지고서 할 수 있는 많은 로더들의 하나의 예일뿐입니다.


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "fetch": "^1.0.0",
14 |     "react": "^0.14.7"
15 |   },
16 |   "devDependencies": {
17 |     "css-loader": "^0.23.1",
18 |     "style-loader": "^0.13.0",
19 |     "webpack": "^1.12.14"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/src/APIStuff.js:
--------------------------------------------------------------------------------
1 | var fetch = require('fetch') // fetch polyfill
2 | fetch('https://google.com')
3 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/src/UIStuff.js:
--------------------------------------------------------------------------------
1 | var React = require('React')
2 | React.createClass({
3 |   // stuff
4 | })
5 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/src/extraFile.js:
--------------------------------------------------------------------------------
1 | console.log('No one likes me')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./UIStuff.js')
3 | require('./APIStuff.js')
4 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: rgb(200, 56, 97);
3 | }
4 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example1/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example2/README.md:
--------------------------------------------------------------------------------
 1 | # Example 2 - A minimal example
 2 | 
 3 | (최소한의 예제)
 4 | [예제 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/ko-arahansa/part1/example2)
 5 | 
 6 | 당신의 디렉터리 구조가 다음과 같다고 합시다 : 
 7 | 
 8 | ```
 9 | MyDirectory
10 | |- dist
11 | |- src
12 |    |- index.js
13 | |- webpack.config.js
14 | 
15 | ```
16 | 
17 | 그러면 당신의 최소 웹팩 설정은 다음과 같이 만들 수 있을 것입니다. 
18 | 
19 | ```javascript
20 | // webpack.config.js
21 | var path = require('path')
22 | 
23 | module.exports = {
24 |   entry: ['./src/index'], // file extension after index is optional for .js files
25 |   output: {
26 |     path: path.join(__dirname, 'dist'),
27 |     filename: 'bundle.js'
28 |   }
29 | }
30 | ```
31 | 
32 | 새로운 속성들을 하나하나씩 알아보겠습니다 :
33 | 
34 | * [entry](https://webpack.github.io/docs/configuration.html#entry) - 당신의 번들의 엔트리포인트입니다. [번들링](#bundling) 섹션에서 좀 더 알아볼 것입니다.. 
35 | 
36 | 웹팩은 여러개의 번들을 생성하기를 원하면, 여러개의 엔트리 포인트들을 허용하기 때문에 엔트리포인트는 배열입니다.
37 | 
38 | * [output](https://webpack.github.io/docs/configuration.html#output) - 웹팩에 의해 출력되는 형태를 나타냅니다. 
39 |   * [path](https://webpack.github.io/docs/configuration.html#output-path) - 번들을 놓을 곳입니다. 
40 |   * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - 번들을 어떻게 부를 지 나타냅니다. 
41 | 
42 | `webpack`을 실행하면 이것은 `bundle.js` 라는 파일을 dist폴더 안에 생성할 것입니다. 
43 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example2",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT"
12 | }
13 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example2/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example2/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: ['./src/index'], // .js after index is optional
 5 |   output: {
 6 |     path: path.join(__dirname, 'dist'),
 7 |     filename: 'bundle.js'
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example3/README.md:
--------------------------------------------------------------------------------
 1 | # Example 3 - Introducing Plugins
 2 | 
 3 | 당신이 모든 파일들을 한꺼번에 번들링했다가 당신이 그것이 900KB라는 것을 깨달았다고 해봅시다. 이것은 번들을 최소화함으로써 개선될 수 있습니다. 제가 이전에 언급한 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)를 사용하여서 이러한 문제를 해결할 수 있습니다. 
 4 | 
 5 | 당신은 플러그인을 사용하려고 웹팩을 로컬로 설치하고 싶을 겁니다.
 6 | 
 7 |     npm install --save-dev webpack
 8 | 
 9 | 당신은 이제 웹팩을 사용하여서 코드를 최소화 하세요 
10 | 
11 | ```javascript
12 | // webpack.config.js
13 | var path = require('path')
14 | var webpack = require('webpack')
15 | 
16 | module.exports = {
17 |   entry: ['./src/index'],
18 |   output: {
19 |     path: path.join(__dirname, 'dist'),
20 |     filename: 'bundle.js'
21 |   },
22 | 
23 |   plugins: [
24 |     new webpack.optimize.UglifyJsPlugin({
25 |       compressor: {
26 |         warnings: false,
27 |       },
28 |     })
29 |   ]
30 | }
31 | ```
32 | 
33 | 새로운 속성들을 하나하나 알아보도록 하겠습니다 : 
34 | 
35 | * plugins - 플러그인들을 적을 배열.
36 |   * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - 코드를 최소화하고 경고 메시지를 숨깁니다. 
37 | 
38 | 여기서 당신이 `webpack`을 칠 때, 당신은 `UglifyJsPlugin`을 가지고서 공백을 제거함으로써 900KB를 200KB 까지 줄일 수 있습니다. 
39 | 
40 | 당신은 또한 [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin) 을 추가할 수가 있습니다.
41 | 
42 | > 모듈을 할당하고 발생 카운트 아이디들을 발생(?chunk)시킵니다. ID들은 종종 적은(짧은) id들을 얻는데 사용됩니다. 이것은 id가 예상가능하며 파일 전체 크기를 경감시켜 추천됩니다. 
43 | 
44 | 솔직히 어떤 메커니즘이 하부에 있는 지 모르겠지만 현재(1버젼?)에서는 기본으로 들어가지 않기 때문에 [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7), 이것또한 추가해줬습니다 .
45 | 
46 | 
47 | ```JavaScript
48 | // webpack.config.js
49 | var path = require('path')
50 | var webpack = require('webpack')
51 | 
52 | module.exports = {
53 |   entry: ['./src/index'],
54 |   output: {
55 |     path: path.join(__dirname, 'dist'),
56 |     filename: 'bundle.js'
57 |   },
58 |   plugins: [
59 |     new webpack.optimize.UglifyJsPlugin({
60 |       compressor: {
61 |         warnings: false,
62 |       },
63 |     }),
64 |     new webpack.optimize.OccurrenceOrderPlugin()
65 |   ]
66 | }
67 | ```
68 | 
69 | 우리는 설정파일을 써서 우리의 번들 자바스크립트 파일을 최소화하였습니다. 이 번들은 다른 프로젝트의 디렉터리로 복사될 수 있습니다. 그리고 그곳의 script태그로 던져질 수 있습니다. 만약 당신이 웹팩의 기초만을 *자바스크립트만* 사용하기를 원한다면 [결론](#conclusion)을 생략할 수 있습니다. 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example3",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example3/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example3/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/README.md:
--------------------------------------------------------------------------------
 1 | 이 튜토리얼의 앞에서 [로더들](#loaders)을 얘기했듯이, 이것들은 우리에게 js파일이 아닌것을 우리의 코드에 require하게 해줍니다. 이러한 경우 우리는 style loader 와 css loader를 필요로 합니다. 먼저 이 로더들을 설치하도록 하겠습니다:
 2 | 
 3 |     npm install --save-dev style-loader css-loader
 4 | 
 5 | 이제 이것들은 설치되었고 설정을 좀 더 바꿔서 css loader 를 추가해줘보도록 하겠습니다. : 
 6 | 
 7 | 
 8 | ```javascript
 9 | // webpack.config.js
10 | var path = require('path')
11 | var webpack = require('webpack')
12 | 
13 | module.exports = {
14 |   entry: ['./src/index'],
15 |   output: {
16 |     path: path.join(__dirname, 'dist'),
17 |     filename: 'bundle.js'
18 |   },
19 |   plugins: [
20 |     new webpack.optimize.UglifyJsPlugin({
21 |       compressor: {
22 |         warnings: false,
23 |       },
24 |     }),
25 |     new webpack.optimize.OccurrenceOrderPlugin()
26 |   ],
27 |   module: {
28 |     loaders: [{
29 |       test: /\.css$/,
30 |       loaders: ['style', 'css']
31 |     }]
32 |   }
33 | }
34 | ```
35 | 
36 | 새로운 속성들을 하나하나 알아보도록 하겠습니다 : 
37 | 
38 | * [모듈](http://webpack.github.io/docs/configuration.html#module) - 당신의 파일들에 영향을 주는 옵션들 입니다. 
39 |   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - 어플리케이션을 위해 적어줄 로더들의 배열입니다. 
40 |     * test - 로더가 적용될 파일을 매칭하기 위한 정규식입니다. 
41 |     * loaders - test에서 매칭된 파일에 어떤 로더를 사용할지 결정합니다. 
42 | 
43 | 여기서 우리가 `webpack`을 실행할 때, 만약 당신이  `.css`로 끝나는 파일들을 `require` 했다면 우리는 이것들에  `style`과 `css` 로더를 적용하고 번들에 해당 css를 추가합니다.
44 | 
45 | 만약 우리가 로더들을 가지고 있지 않았다면, 우리는 다음과 같은 에러를 얻을 것입니다 : 
46 | 
47 | ```
48 | ERROR in ./test.css
49 | Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
50 | Line 1: Unexpected token {
51 | You may need an appropriate loader to handle this file type.
52 | ```
53 | 
54 | **Optional(옵션)**
55 | 
56 | 만약 당신이 CSS대신에 SCSS 를 사용하기를 원핟다면 다음과 같이 실행하세요 : 
57 | 
58 |     npm install --save-dev sass-loader node-sass webpack
59 | 
60 | 그리고 로더 부분을 다음과 같이 적으세요.. 
61 | 
62 | ```javascript
63 | {
64 |   test: /\.scss$/,
65 |   loaders: ["style", "css", "sass"]
66 | }
67 | ```
68 | 
69 | LESS도 비슷합니다. 
70 | 
71 | 로더를 인식하는 점에서 중요한 점은 이러한 로더들이 적혀지는 *순서*입니다. 위의 예제에서 `sass`로더가 제일 처음 당신의 `.scss` 파일들에 적용이 되고 그리고 `css`로더가 적용이 되며 마지막으로 `style`로더가 적용이 되게 됩니다. 당신이 볼 수 있듯이, 패턴이 적용되는 순서는 오른쪽에서 왼쪽입니다. 
72 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example4",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/src/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/ko-arahansa/part1/example4/src/index.html


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/src/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/ko-arahansa/part1/example4/src/styles.css


--------------------------------------------------------------------------------
/ko-arahansa/part1/example4/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/README.md:
--------------------------------------------------------------------------------
  1 | # Example 5 - Adding More Plugins
  2 | 
  3 | 이제 우리는 우리의 우리가 스타일할 실제 웹페이지에 스타일을 적용할 수 있을 기반을 가졌습니다. 
  4 | 우리는 이것을 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)을 통해서 할 것인데 이것은 HTML페이지를 생성하거나 이미 존재하는 페이지를 사용합니다. 우리는 이미 존재하는 `index.html`을 사용하고자 합니다. 
  5 | 
  6 | 먼저 플러그인을 설치해보도록 하겠습니다 : 
  7 | 
  8 |     npm install --save-dev html-webpack-plugin@2
  9 | 
 10 | 
 11 | 그리고 우리는 우리의 설정파일에 추가해보도록 하겠습니다. 
 12 | 
 13 | ```javascript
 14 | // webpack.config.js
 15 | var path = require('path')
 16 | var webpack = require('webpack')
 17 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 18 | 
 19 | module.exports = {
 20 |   entry: ['./src/index'],
 21 |   output: {
 22 |     path: path.join(__dirname, 'dist'),
 23 |     filename: 'bundle.js'
 24 |   },
 25 |   plugins: [
 26 |     new webpack.optimize.UglifyJsPlugin({
 27 |       compressor: {
 28 |         warnings: false,
 29 |       },
 30 |     }),
 31 |     new webpack.optimize.OccurrenceOrderPlugin(),
 32 |     new HtmlWebpackPlugin({
 33 |       template: './src/index.html'
 34 |     })
 35 |   ],
 36 |   module: {
 37 |     loaders: [{
 38 |       test: /\.css$/,
 39 |       loaders: ['style', 'css']
 40 |     }]
 41 |   }
 42 | }
 43 | ```
 44 | 
 45 | 여기서 우리는 `webpack`을 실행하면, 우리가 `HtmlWebpackPlugin`을 `./src/index.html`에 적용해뒀기 때문에, 이것은 `dist`폴더에 `./src/index.html`를 기반으로 하여서 `index.html` 을 생성할 것입니다. 
 46 | 
 47 | (There's no point in using `index.html` as a template if it's empty.)
 48 | 이제 실제로 실제로 index.html을 만들어봅시다.
 49 | 
 50 | ```html
 51 | <html>
 52 | <head>
 53 |   <title>Webpack Tutorial</title>
 54 | </head>
 55 | <body>
 56 |   <h1>Very Website</h1>
 57 |   <section id="color"></section>
 58 |   <button id="button">Such Button</button>
 59 | </body>
 60 | </html>
 61 | ```
 62 | 
 63 | 여기서 우리는 `bundle.js` 를 위한 `<script>`태그를 HTML 에 적지 않았다는 것을 알아둡시다. 이 플러그인은 실제로 당신을 위하여 이 일(번들을 넣어주는 일)을 해줍니다. 만약 당신이 script태그를 적는다면 당신은 같은 코드를 두번 불러오게 될 것입니다. 
 64 | 
 65 | 그리고 기초 스타일을 `styles.css`에 적어두도록 하겠습니다. 
 66 | 
 67 | ```css
 68 | h1 {
 69 |   color: rgb(114, 191, 190);
 70 |   text-align: center;
 71 | }
 72 | 
 73 | #color {
 74 |   width: 300px;
 75 |   height: 300px;
 76 |   margin: 0 auto;
 77 | }
 78 | 
 79 | button {
 80 |   cursor: pointer;
 81 |   display: block;
 82 |   width: 100px;
 83 |   outline: 0;
 84 |   border: 0;
 85 |   margin: 20px auto;
 86 | }
 87 | ```
 88 | 
 89 | 
 90 | #### 기타 노트
 91 | 저는 `html-webpack-plugin`가 꽤 덜 사용되어져야 한다고 말하고 싶습니다. 저에게는 웹팩이 정말 간단하게 SPA를 만들려고 부트스트랩할 것을 가지고 있을 때나 HTML파일들을 만들었습니다. 하나의 HTML파일을을 만들어내는 경험으로는 유용하지만 12개의 HTML파일들을 새성하는 것을 추천하지는 않습니다. 이것은 당신이 angular디렉티브나같은 것들을 사용할 수 없다는 뜻이 아닙니다. 이러한 경우(여러개의  HTML파일 생성) 당신은 다음과 같이 할 수 있을 것입니다 : 
 92 | 
 93 | ```javascript
 94 | // ...directive stuff
 95 | template: require('./templates/button.html') // using raw loader
 96 | ```
 97 | 
 98 | 대신에 , 당신은 이렇게 할 수도 있을 것입니다 : 
 99 | 
100 | ```javascript
101 | new HtmlWebpackPlugin
102 |   template: './src/index.html'
103 | }),
104 | new HtmlWebpackPlugin({
105 |   template: './src/button.html'
106 | }),new HtmlWebpackPlugin({
107 |   template: './src/page2.html'
108 | })
109 | ```
110 | 
111 | 내가 틀렸다면 누구든지 자신의 경험을 얘기해주고 저를 교정해주세요~
112 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example5",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "html-webpack-plugin": "^2.8.1",
14 |     "webpack": "^1.12.13"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example5/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   entry: ['./src/index'],
 7 |   output: {
 8 |     path: path.join(__dirname, 'dist'),
 9 |     filename: 'bundle.js'
10 |   },
11 |   plugins: [
12 |     new webpack.optimize.UglifyJsPlugin({
13 |       compressor: {
14 |         warnings: false,
15 |       },
16 |     }),
17 |     new webpack.optimize.OccurrenceOrderPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/README.md:
--------------------------------------------------------------------------------
  1 | # Example 6 - The Development Server
  2 | 
  3 | 이제 우리는 실제로 우리의 우리의 코드를 서비스하는 웹사이트를 브라우저로 보기를 원합니다. 편리하게 웹팩은 
  4 | 
  5 | Now we want to actually see our website in the browser, which requires a web  `webpack-dev-server`를 가지고 있는데 이것은 로컬과 글로벌로 동시에 설치하는 것을 필요로 합니다. 
  6 | 
  7 |     npm install -g webpack-dev-server
  8 |     npm install --save-dev webpack-dev-server
  9 | 
 10 | 웹팩개발서버는 브라우저로 당신의 웹사이트를 보는데 꽤 유용하며 빠른 개발을 하게 해줍니다. 기본적으로 당신은 `http://localhost:8080` 로 접속해서 볼 수가 있습니다. 불행하게도 핫모듈 대체같은 것은 꽤 훌륭하진 않아서 몇가지 추가 설정이 필요합니다. 
 11 | 
 12 | 왜냐하면 우리는 지금까지 이 튜토리얼에서 단순하게 해왔고, 지금까지 많은 차이가 없을 테지만, 웹팩 설정의 기초적인 설정이었습니다. 우리는 나눌 설정파일들을 `webpack.config.dev.js` 와 `webpack.config.prod.js` 로 부르겠습니다. 
 13 | 
 14 | ```javascript
 15 | // webpack.config.dev.js
 16 | var path = require('path')
 17 | var webpack = require('webpack')
 18 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 19 | 
 20 | module.exports = {
 21 |   devtool: 'cheap-eval-source-map',
 22 |   entry: [
 23 |     'webpack-dev-server/client?http://localhost:8080',
 24 |     'webpack/hot/dev-server',
 25 |     './src/index'
 26 |   ],
 27 |   output: {
 28 |     path: path.join(__dirname, 'dist'),
 29 |     filename: 'bundle.js'
 30 |   },
 31 |   plugins: [
 32 |     new webpack.HotModuleReplacementPlugin(),
 33 |     new HtmlWebpackPlugin({
 34 |       template: './src/index.html'
 35 |     })
 36 |   ],
 37 |   module: {
 38 |     loaders: [{
 39 |       test: /\.css$/,
 40 |       loaders: ['style', 'css']
 41 |     }]
 42 |   },
 43 |   devServer: {
 44 |     contentBase: './dist',
 45 |     hot: true
 46 |   }
 47 | }
 48 | ```
 49 | 
 50 | 
 51 | **변화들**
 52 | 
 53 | 1. 웹팩 개발 서버는 다시 재building을 하는데 있어서 불필요한 최적화들을 생략합니다. 그래서  `webpack.optimize`플러그인들이 없습니다. 
 54 | 
 55 | 2. 개발설정은 개발서버를  위하여 필요하며 여기를 더 읽어보시면 될겁니다. 
 56 | [here](https://webpack.github.io/docs/webpack-dev-server.html).
 57 | 
 58 | 요약 Summarized:
 59 | 
 60 | * entry : 두개의 새로운 엔트리포인트가 서버와 브라우저에 접속하여 HMR을 허용합니다. 
 61 | * devServer
 62 |   * contentBase: 제공할 파일들을 위치를 지정합니다. 
 63 |   * hot: 핫모듈 대체를 활성화하합니다. 
 64 | 
 65 | 프로덕션 설정은 별로 바뀐 것이 없습니다
 66 | 
 67 | ```javascript
 68 | // webpack.config.prod.js
 69 | var path = require('path')
 70 | var webpack = require('webpack')
 71 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 72 | 
 73 | module.exports = {
 74 |   devtool: 'source-map',
 75 |   entry: ['./src/index'],
 76 |   output: {
 77 |     path: path.join(__dirname, 'dist'),
 78 |     filename: 'bundle.js'
 79 |   },
 80 |   plugins: [
 81 |     new webpack.optimize.UglifyJsPlugin({
 82 |       compressor: {
 83 |         warnings: false,
 84 |       },
 85 |     }),
 86 |     new webpack.optimize.OccurrenceOrderPlugin(),
 87 |     new HtmlWebpackPlugin({
 88 |       template: './src/index.html'
 89 |     })
 90 |   ],
 91 |   module: {
 92 |     loaders: [{
 93 |       test: /\.css$/,
 94 |       loaders: ['style', 'css']
 95 |     }]
 96 |   }
 97 | }
 98 | ```
 99 | 
100 | 여기서 개발설정와 프로덕션 설정에도 새로운 속성을 추가해줬습니다 : 
101 | 
102 | * [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 디버깅 목적입니다.
103 | 기본적으로 당신이 에러를 얻을 때, 이것은 당신이 크롬개발콘솔같이 어디서 실수를 만들어냈는지 보기 쉽게 해줍니다. 
104 | `source-map`과 `cheap-eval-source-map`의 차이는 문서를 찾기 어렵지만, 제가 분명히 말씀드릴 수 있는 것은 `source-map`은 프로덕션용이고 오버헤드가 많으며 `cheap-eval-source-map` 는 오버헤드가 적고 개발만을 위합니다.
105 | 
106 | 개발서버를 실행시키기 위해 다음과 같이 실행할 것입니다
107 | 
108 |     webpack-dev-server --config webpack.config.dev.js
109 | 
110 | 그리고 프로덕션 코드는 다음과 같이 실행할 것입니다. 
111 | 
112 |     webpack --config webpack.config.prod.js
113 | 
114 | 
115 | 우리의 삶을 좀 더 쉽게 하기 위해 우리는 `package.json`에 간단한 태스크 실행기를 추가하여서 우리가 저런 명령들을 계속 타이핑 하지 않게 할 수 있습니다 .
116 | 
117 | 우리는 설정에 `scripts` 속성들을 추가할 것입니다
118 | 
119 | 
120 | ```javascript
121 | // package.json
122 | {
123 |   //...
124 |   "scripts": {
125 |     "build": "webpack --config webpack.config.prod.js",
126 |     "dev"  : "webpack-dev-server --config webpack.config.dev.js"
127 |   }
128 |   //...
129 | }
130 | ```
131 | 
132 | 그러면 다음과 같이 실행하면 됩니다
133 | 
134 | ```
135 | npm run build
136 | npm run dev
137 | ```
138 | 
139 | 당신은 당신의 아름다움 웹사이트를 `npm run dev`를 실행시킴으로써 볼 수가 있습니다. 그리고 `http://localhost:8080`로 접속해보세요
140 | 
141 | **기타 노트**: 제가 이 부분을 테스트해보면서 `index.html`을 수정하였을때 서버가 핫리로드 되지 않았단 것을 알 수가 있었습니다. 이것에 대한 해결책으로 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/ko-arahansa/part1/html-reload)를 보시면 됩니다. 이것은 웹팩의 좀 더 많은 설정을 살펴보는 유용한 정보지만 저는 이것을 이 튜토리얼과 분리하도록 하겠습니다. 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "webpack": "^1.12.13",
16 |     "webpack-dev-server": "^1.14.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('hello there my friends')
2 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example6/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/README.md:
--------------------------------------------------------------------------------
 1 | # Example 7 - Start Coding
 2 | 
 3 | 대부분의 사람이 웹팩에 의해 처음에 어리둥절하는 것은, 그들이 자바스크립트를 작성하기 위한 시점까지 가기 위해 이러한 것들을 모두 거쳐야 하기 때문입니다. 그러나 우리는 마침내 이 튜토리얼의 클라이맥스에 도달하였습니다. 
 4 | 
 5 | 당신이 아직 준비가 되지 않았을 지도 모르니.. `npm run dev`를 치시고 `http://localhost:8080`를 쳐보세요.. 개발서버를 핫리로딩으로 세팅한 것이 아직 나타나진 않지만, 당신 프로젝트의 어떤 부분을 수정하건간에(역주: entry에 설정한 부분일듯)  브라우저는 그 변화를 반영할 것입니다. 
 6 | 
 7 | 우리는 npm 패키지를 하나 더 얻어서, 어덯게 이것들을 프론트엔드에서 지금 사용할 것인지 설명할 것입니다. 
 8 | 
 9 |     npm install --save pleasejs
10 | 
11 | PleaseJS는 랜덤 컬러 생성기로 우리의 div 색상을, 버튼에 이벤트를 연결해서 바꿀 것입니다. 
12 | 
13 | ```javascript
14 | // index.js
15 | 
16 | // Accept hot module reloading
17 | if (module.hot) {
18 |   module.hot.accept()
19 | }
20 | 
21 | require('./styles.css') // The page is now styled
22 | var Please = require('pleasejs')
23 | var div = document.getElementById('color')
24 | var button = document.getElementById('button')
25 | 
26 | function changeColor() {
27 |   div.style.backgroundColor = Please.make_color()
28 | }
29 | 
30 | button.addEventListener('click', changeColor)
31 | ```
32 | 
33 | 흥미롭게도, [핫모듈 대체가 동작하게 하기 위해](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
34 | 
35 | 당신은 이 코드를 필요로 할 것입니다 : 
36 | 
37 | ```javascript
38 | if (module.hot) {
39 |   module.hot.accept()
40 | }
41 | ```
42 | 
43 | 이것을 모듈의 부모나 모듈안에 넣어두세요. 
44 | 그러면 됬습니다. 
45 | 
46 | **기타 노트:** 당신은 아마 css가 적용되는 동안에 딜레이를 눈치채거나 css가 자바스크립트안에 들어가있는 것을 싫어할수도 있습니다. 그런 경우를 대비하여서 다른 예제를 만들었습니다. 
47 | [css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract). 
48 | 여기서는 어떻게 CSS를 다른 파일에 넣을 것인지 설명합니다. 
49 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example7",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "html-webpack-plugin": "^2.8.1",
16 |     "style-loader": "^0.13.0",
17 |     "webpack": "^1.12.13",
18 |     "webpack-dev-server": "^1.14.1"
19 |   },
20 |   "dependencies": {
21 |     "pleasejs": "^0.4.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/src/index.js:
--------------------------------------------------------------------------------
 1 | // Accept hot module reloading
 2 | if (module.hot) {
 3 |   module.hot.accept()
 4 | }
 5 | 
 6 | require('./styles.css') // The page is now styled
 7 | var Please = require('pleasejs')
 8 | var div = document.getElementById('color')
 9 | var button = document.getElementById('button')
10 | 
11 | function changeColor() {
12 |   div.style.backgroundColor = Please.make_color()
13 |   console.log('HMR works no')
14 | }
15 | 
16 | button.addEventListener('click', changeColor)
17 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/example7/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/README.md:
--------------------------------------------------------------------------------
  1 | # 추가 - HTML을 핫리로드하게 만들기
  2 | 
  3 | 제가 테스트를 할 동안에 저는 index.html이 hot reload되지 않는 다는 것을 꺠달았습니다. 잠시 검색한 후에 저는 최종적으로 여기들을 보았습니다. 
  4 | 
  5 | [이것이 도움이 되는 답변이었고](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin) 약간 hacky한 해결책을 이루기위해서, 
  6 | [로더를 더 필요했습니다. ](https://github.com/webpack/raw-loader) 
  7 | 
  8 | 그리고 이 솔루션이 프로덕션으로 가는 것을 방지하기 위해 [one more plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 이 더 필요했습니다. 
  9 | 
 10 | 기본적으로 웹팩에서 HTML을 핫리로드하기 위해서, 우리는 그것을 우리의 우리가 require 하는 파일들 중 하나로, 의존성 계층의 하나로 만들어야 합니다. 이것은 HTML을 문자열로 자바스크립트로 불러오는데 이것이 우리가 필요로 하는 것입니다. 그리고 의존성 계층에 HTML을 더할 것입니다. 
 11 | 
 12 | 그러면 우리의 개발설정에 로더를 추가해봅시다 : 
 13 | 
 14 | 먼저 다음과 같이 치고
 15 | 
 16 |     npm install --save-dev raw-loader
 17 | 
 18 | 다음과 같이 칩시다 :
 19 | 
 20 | ```javascript
 21 | // webpack.config.dev.js
 22 | var path = require('path')
 23 | var webpack = require('webpack')
 24 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 25 | 
 26 | module.exports = {
 27 |   devtool: 'cheap-eval-source-map',
 28 |   entry: [
 29 |     'webpack-dev-server/client?http://localhost:8080',
 30 |     'webpack/hot/dev-server',
 31 |     './src/index'
 32 |   ],
 33 |   output: {
 34 |     path: path.join(__dirname, 'dist'),
 35 |     filename: 'bundle.js'
 36 |   },
 37 |   plugins: [
 38 |     new webpack.HotModuleReplacementPlugin(),
 39 |     new HtmlWebpackPlugin({
 40 |       template: './src/index.html'
 41 |     })
 42 |   ],
 43 |   module: {
 44 |     loaders: [{
 45 |       test: /\.css$/,
 46 |       loaders: ['style', 'css']
 47 |     }, {
 48 |       test: /\.html$/,
 49 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
 50 |     }]
 51 |   },
 52 |   devServer: {
 53 |     contentBase: './dist',
 54 |     hot: true
 55 |   }
 56 | }
 57 | ```
 58 | 여기서 당신이 `webpack`을 실행하고 `.html`로 끝나는 파일을 `require`하게 되어있다면 우리는 그것들에 `raw-loader`를 적용하여 HTML을 번들에 추가할 것입니다. 
 59 | 
 60 | 우리는 현재 우리가 비어있는 `index.js` 에서 해볼 것입니다. 
 61 | 
 62 | This time, when you run `webpack`, if we `require` a file that ends in `.html`, then we will apply
 63 | the `raw-loader` loader to it, which adds the HTML to the bundle.
 64 | 
 65 | Now in our currently empty `index.js` file we can do.
 66 | 
 67 | ```javascript
 68 | // index.js
 69 | require('./index.html')
 70 | ```
 71 | 
 72 | 만약 우리가 검사해보면, 핫리로드는 동작할 것입니다. 하지만 당신은 `index.js`에 `index.html`을 require해야 한다는 것을 깨달을 것입니다. 그리고 이것은 실제 의미없는 일입니다.. (맞나?;;) 
 73 | 
 74 | 우리는 프로덕션에서 이렇게 되기를 원하지 않으므로 이것이 우리가 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 을 필요로 하는 이유입니다 .
 75 | 
 76 | 이 플러그인은 우리의 전체 번들에서 글로벌 상수를 만들게 해주고 이것의 이름을 어떤 것이든 할 수가 있습니다. `DONT_USE_IN_PRODUCTION: true` 이렇게도 말이죠... 그러나 좀 더 실용적으로 봤을 때, 좀더 친숙하여 인기있는 선택은 `process.env.NODE_ENV: JSON.stringify('production')` 입니다. 왜 JSON.stringfy이냐구요? 문서에 그렇게 나와있어서인듯합니다(?)
 77 | 
 78 | > 만약 값이 문자열일 때 우리는 그것을 코드의 조각으로 사용될 것입니다.
 79 | 
 80 | 이제 우리는 우리의 프로덕션 설정에 이플러그인을 추가할 것입니다 : 
 81 | 
 82 | ```javascript
 83 | // webpack.config.prod.js
 84 | var path = require('path')
 85 | var webpack = require('webpack')
 86 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 87 | 
 88 | module.exports = {
 89 |   devtool: 'source-map',
 90 |   entry: ['./src/index'],
 91 |   output: {
 92 |     path: path.join(__dirname, 'dist'),
 93 |     filename: 'bundle.js'
 94 |   },
 95 |   plugins: [
 96 |     new webpack.optimize.UglifyJsPlugin({
 97 |       compressor: {
 98 |         warnings: false,
 99 |       },
100 |     }),
101 |     new webpack.optimize.OccurenceOrderPlugin(),
102 |     new HtmlWebpackPlugin({
103 |       template: './src/index.html'
104 |     }),
105 |     new webpack.DefinePlugin({
106 |       'process.env.NODE_ENV': JSON.stringify('production')
107 |     })
108 |   ],
109 |   module: {
110 |     loaders: [{
111 |       test: /\.css$/,
112 |       loaders: ['style', 'css']
113 |     }]
114 |   }
115 | }
116 | ```
117 | 그리고 우리의 `index.js`에서 우리는 다음과같은 조건을 넣을 것입니다
118 | 
119 | 
120 | ```javascript
121 | if (process.env.NODE_ENV !== 'production') {
122 |   require('./index.html')
123 | }
124 | ```
125 | 휴, 문제가 해결되었군요.  production 빌드에서는 우리는 의존성 계층에 `index.html`을 필요로 하지 않기 때문에 `index.html`을 require하지 않을 것입니다. 이것은 또한 `raw-loader`를 필요로 하지 않는다는 것을 의미합니다. 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "raw-loader": "^0.5.1",
16 |     "webpack": "^1.12.13",
17 |     "webpack-dev-server": "^1.14.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/src/index.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV !== 'production') {
2 |   require('./index.html')
3 | }
4 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 | }
 4 | 
 5 | #color {
 6 |   width: 300px;
 7 |   height: 300px;
 8 |   margin: 0 auto;
 9 | }
10 | 
11 | button {
12 |   cursor: pointer;
13 |   display: inline-block;
14 |   height: 20px;
15 |   background-color: rgb(123, 109, 198);
16 |   color: rgb(255, 255, 255);
17 |   padding: 10px 5px;
18 |   border-radius: 4px;
19 |   border-bottom: 2px solid rgb(143, 132, 200);
20 | }
21 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }, {
27 |       test: /\.html$/,
28 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
29 |     }]
30 |   },
31 |   devServer: {
32 |     contentBase: './dist',
33 |     hot: true
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/ko-arahansa/part1/html-reload/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     }),
22 |     new webpack.DefinePlugin({
23 |       'process.env.NODE_ENV': JSON.stringify('production')
24 |     })
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }
4 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb/base",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "comma-dangle": 0,
 6 |     "no-console": 0,
 7 |     "semi": [2, "never"],
 8 |     "func-names": 0,
 9 |     "space-before-function-paren": 0,
10 |     "no-multi-spaces": 0,
11 |     "babel/generator-star-spacing": 1,
12 |     "babel/new-cap": 1,
13 |     "babel/object-shorthand": 1,
14 |     "babel/arrow-parens": 1,
15 |     "babel/no-await-in-loop": 1
16 |   },
17 |   "plugins": [
18 |     "babel"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js",
 9 |     "lint": "eslint src"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "babel-core": "^6.9.1",
16 |     "babel-eslint": "^6.0.4",
17 |     "babel-loader": "^6.2.4",
18 |     "babel-preset-es2015": "^6.9.0",
19 |     "babel-preset-stage-2": "^6.5.0",
20 |     "css-loader": "^0.23.1",
21 |     "eslint": "^2.12.0",
22 |     "eslint-config-airbnb-base": "^3.0.1",
23 |     "eslint-plugin-babel": "^3.2.0",
24 |     "html-webpack-plugin": "^2.21.0",
25 |     "style-loader": "^0.13.1",
26 |     "webpack": "^1.13.1",
27 |     "webpack-dev-server": "^1.14.1"
28 |   },
29 |   "dependencies": {
30 |     "pleasejs": "^0.4.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/src/index.js:
--------------------------------------------------------------------------------
 1 | import Please from 'pleasejs' // use es6 module import
 2 | require('./styles.css') // The page is now styled
 3 | 
 4 | // Accept hot module reloading during development
 5 | if (process.env.NODE_ENV !== 'production') {
 6 |   if (module.hot) {
 7 |     module.hot.accept()
 8 |   }
 9 | }
10 | 
11 | const div = document.getElementById('color')
12 | const button = document.getElementById('button')
13 | const changeColor = () => div.style.backgroundColor = Please.make_color()
14 | 
15 | button.addEventListener('click', changeColor)
16 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'cheap-eval-source-map',
 9 |   entry: [
10 |     'webpack-dev-server/client?http://localhost:8080',
11 |     'webpack/hot/dev-server',
12 |     './src/index'
13 |   ],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.HotModuleReplacementPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     })
23 |   ],
24 |   module: {
25 |     loaders: [{
26 |       test: /\.css$/,
27 |       loaders: ['style', 'css']
28 |     }, {
29 |       test: /\.js$/,
30 |       loaders: ['babel'],
31 |       include: path.join(__dirname, 'src')
32 |     }]
33 |   },
34 |   devServer: {
35 |     contentBase: './dist',
36 |     hot: true
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/ko-arahansa/part2/example1/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'source-map',
 9 |   entry: ['./src/index'],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js'
13 |   },
14 |   plugins: [
15 |     new webpack.optimize.UglifyJsPlugin({
16 |       compressor: {
17 |         warnings: false,
18 |       },
19 |     }),
20 |     new webpack.optimize.OccurrenceOrderPlugin(),
21 |     new HtmlWebpackPlugin({
22 |       template: './src/index.html'
23 |     }),
24 |     new webpack.DefinePlugin({
25 |       'process.env.NODE_ENV': JSON.stringify('production')
26 |     })
27 |   ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.css$/,
31 |       loaders: ['style', 'css']
32 |     }, {
33 |       test: /\.js$/,
34 |       loaders: ['babel'],
35 |       include: path.join(__dirname, 'src')
36 |     }]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/part1/css-extract/README.md:
--------------------------------------------------------------------------------
 1 | # Extra - Extract Your CSS
 2 | 
 3 | Ok so now you've finished, but in production you don't want your CSS file to be inline with your
 4 | javascript. For this purpose we'll be using the
 5 | [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin).
 6 | 
 7 |     npm install --save-dev extract-text-webpack-plugin
 8 | 
 9 | And we make the necessary changes to our webpack prod config:
10 | 
11 | ```javascript
12 | var path = require('path')
13 | var webpack = require('webpack')
14 | var HtmlWebpackPlugin = require('html-webpack-plugin')
15 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
16 | 
17 | module.exports = {
18 |   devtool: 'source-map',
19 |   entry: ['./src/index'],
20 |   output: {
21 |     path: path.join(__dirname, 'dist'),
22 |     filename: 'bundle.js'
23 |   },
24 |   plugins: [
25 |     new webpack.optimize.UglifyJsPlugin({
26 |       compressor: {
27 |         warnings: false,
28 |       },
29 |     }),
30 |     new webpack.optimize.OccurenceOrderPlugin(),
31 |     new HtmlWebpackPlugin({
32 |       template: './src/index.html'
33 |     }),
34 |     new ExtractTextPlugin("styles.css")
35 |   ],
36 |   module: {
37 |     loaders: [{
38 |       test: /\.css$/,
39 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
40 |     }]
41 |   }
42 | }
43 | ```
44 | 
45 | These changes come straight from the README of the
46 | [official-repo](https://github.com/webpack/extract-text-webpack-plugin). Make sure to take a look if
47 | you want to know how it works more in depth.
48 | 
49 | > It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
50 | 
51 | Now if you do an `npm run build` using this config your CSS will be in a separate file, and
52 | interestingly, already included in your `index.html`.
53 | 
54 | ```html
55 | <html>
56 | <head>
57 |   <title>Webpack Tutorial</title>
58 | <link href="styles.css" rel="stylesheet"> <------ MAGICALLY ADDED
59 | </head>
60 | <body>
61 |   <h1>Very Website</h1>
62 |   <section id="color"></section>
63 |   <button id="button">Such Button</button>  
64 | <script src="bundle.js"></script></body>
65 | </html>
66 | ```
67 | 


--------------------------------------------------------------------------------
/part1/css-extract/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-extract",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "extract-text-webpack-plugin": "^1.0.1",
16 |     "html-webpack-plugin": "^2.8.1",
17 |     "style-loader": "^0.13.0",
18 |     "webpack": "^1.12.13",
19 |     "webpack-dev-server": "^1.14.1"
20 |   },
21 |   "dependencies": {
22 |     "pleasejs": "^0.4.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/part1/css-extract/src/changeColor.js:
--------------------------------------------------------------------------------
 1 | var Please = require('pleasejs')
 2 | var div = document.getElementById('color')
 3 | var button = document.getElementById('button')
 4 | 
 5 | function changeColor() {
 6 |   div.style.backgroundColor = Please.make_color()
 7 |   console.log('pls do work')
 8 | }
 9 | 
10 | button.addEventListener('click', changeColor)
11 | 


--------------------------------------------------------------------------------
/part1/css-extract/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/part1/css-extract/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./changeColor.js')
3 | 


--------------------------------------------------------------------------------
/part1/css-extract/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/part1/css-extract/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/part1/css-extract/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 | 
 6 | module.exports = {
 7 |   devtool: 'source-map',
 8 |   entry: ['./src/index'],
 9 |   output: {
10 |     path: path.join(__dirname, 'dist'),
11 |     filename: 'bundle.js'
12 |   },
13 |   plugins: [
14 |     new webpack.optimize.UglifyJsPlugin({
15 |       compressor: {
16 |         warnings: false,
17 |       },
18 |     }),
19 |     new webpack.optimize.OccurrenceOrderPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     }),
23 |     new ExtractTextPlugin("styles.css")
24 |   ],
25 |   module: {
26 |     loaders: [{
27 |       test: /\.css$/,
28 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/part1/example1/README.md:
--------------------------------------------------------------------------------
 1 | # Example 1 - Bundling and Loaders
 2 | 
 3 | ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 4 | 
 5 | Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
 6 | on modules and module bundling definitely check out these two great articles:
 7 | [here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
 8 | and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
 9 | We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
10 | This file will be the root of your tree. Then every time you `require` a file from another file it's
11 | added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
12 | 
13 | Here's a simple example:
14 | 
15 | ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
16 | 
17 | Given this picture you could have the directory:
18 | 
19 | ```
20 | MyDirectory
21 | |- index.js
22 | |- UIStuff.js
23 | |- APIStuff.js
24 | |- styles.css
25 | |- extraFile.js
26 | ```
27 | 
28 | and this could be the content of your files
29 | 
30 | ```javascript
31 | // index.js
32 | require('./styles.css')
33 | require('./UIStuff.js')
34 | require('./APIStuff.js')
35 | 
36 | // UIStuff.js
37 | var React = require('React')
38 | React.createClass({
39 |   // stuff
40 | })
41 | 
42 | // APIStuff.js
43 | var fetch = require('fetch') // fetch polyfill
44 | fetch('https://google.com')
45 | ```
46 | 
47 | ```css
48 | /* styles.css */
49 | body {
50 |   background-color: rgb(200, 56, 97);
51 | }
52 | ```
53 | 
54 | When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`, which was in the same directory, will not be part of
55 | the bundle because it is not a part of the dependency tree:
56 | 
57 | `bundle.js` will look like:
58 | 
59 | ```javascript
60 | // contents of styles.css
61 | // contents of UIStuff.js + React
62 | // contents of APIStuff.js + fetch
63 | ```
64 | 
65 | The things that are bundled are only the things that you explicitly required across your files.
66 | 
67 | ### Loaders
68 | 
69 | As you probably noticed, I did something strange in the above example. I `required` a css file in a javascript file.
70 | 
71 | The really cool and interesting thing about webpack is that you can `require` more than just
72 | javascript files.
73 | 
74 | There is this thing in webpack called a loader. Using these loaders, you can
75 | `require` anything from `.css` and `.png` to `.html` files.
76 | 
77 | For example in the diagram above I had
78 | 
79 | ```javascript
80 | // index.js
81 | require('./styles.css')
82 | ```
83 | 
84 | If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
85 | valid, but also will actually apply the CSS to my page.
86 | 
87 | This is just a single example of the many loaders you can use with webpack.
88 | 


--------------------------------------------------------------------------------
/part1/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "fetch": "^1.0.0",
14 |     "react": "^0.14.7"
15 |   },
16 |   "devDependencies": {
17 |     "css-loader": "^0.23.1",
18 |     "style-loader": "^0.13.0",
19 |     "webpack": "^1.12.14"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/part1/example1/src/APIStuff.js:
--------------------------------------------------------------------------------
1 | var fetch = require('fetch') // fetch polyfill
2 | fetch('https://google.com')
3 | 


--------------------------------------------------------------------------------
/part1/example1/src/UIStuff.js:
--------------------------------------------------------------------------------
1 | var React = require('React')
2 | React.createClass({
3 |   // stuff
4 | })
5 | 


--------------------------------------------------------------------------------
/part1/example1/src/extraFile.js:
--------------------------------------------------------------------------------
1 | console.log('No one likes me')
2 | 


--------------------------------------------------------------------------------
/part1/example1/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./UIStuff.js')
3 | require('./APIStuff.js')
4 | 


--------------------------------------------------------------------------------
/part1/example1/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: rgb(200, 56, 97);
3 | }
4 | 


--------------------------------------------------------------------------------
/part1/example1/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/part1/example2/README.md:
--------------------------------------------------------------------------------
 1 | # Example 2 - A minimal example
 2 | 
 3 | Say your directory structure looks like this:
 4 | 
 5 | ```
 6 | MyDirectory
 7 | |- dist
 8 | |- src
 9 |    |- index.js
10 | |- webpack.config.js
11 | 
12 | ```
13 | 
14 | Then a very minimal webpack config you can make is this
15 | 
16 | ```javascript
17 | // webpack.config.js
18 | var path = require('path')
19 | 
20 | module.exports = {
21 |   entry: ['./src/index'], // .js after index is optional
22 |   output: {
23 |     path: path.join(__dirname, 'dist'),
24 |     filename: 'bundle.js'
25 |   }
26 | }
27 | ```
28 | 
29 | Going over the new properties one by one:
30 | 
31 | * [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle, which we discussed in the [bundling](#bundling) section. It's an array because webpack allows multiple entry points if you want to generate multiple bundles.
32 | 
33 | * [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
34 |   * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
35 |   * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the bundle
36 | 
37 | When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
38 | 


--------------------------------------------------------------------------------
/part1/example2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example2",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT"
12 | }
13 | 


--------------------------------------------------------------------------------
/part1/example2/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/part1/example2/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: ['./src/index'], // .js after index is optional
 5 |   output: {
 6 |     path: path.join(__dirname, 'dist'),
 7 |     filename: 'bundle.js'
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/part1/example3/README.md:
--------------------------------------------------------------------------------
 1 | # Example 3 - Introducing Plugins
 2 | 
 3 | Imagine that you've used webpack to bundle all your files together, and now you've realized that all
 4 | together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
 5 | you need to use a plugin I mentioned earlier called the
 6 | [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
 7 | 
 8 | Moreover you will need to have webpack installed locally to actually be able to use the plugin.
 9 | 
10 |     npm install --save-dev webpack
11 | 
12 | Now you can require webpack and minify your code.
13 | 
14 | ```javascript
15 | // webpack.config.js
16 | var path = require('path')
17 | var webpack = require('webpack')
18 | 
19 | module.exports = {
20 |   entry: ['./src/index'],
21 |   output: {
22 |     path: path.join(__dirname, 'dist'),
23 |     filename: 'bundle.js'
24 |   },
25 | 
26 |   plugins: [
27 |     new webpack.optimize.UglifyJsPlugin({
28 |       compressor: {
29 |         warnings: false,
30 |       },
31 |     })
32 |   ]
33 | }
34 | ```
35 | Going over the new properties one by one:
36 | 
37 | * plugins - An array that holds your plugins.
38 |   * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
39 | 
40 | This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your
41 | imaginary 900KB file to 200KB by through processes such as removing all the whitespace.
42 | 
43 | You can also add the [OrderOccurencePlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
44 | 
45 | > Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This make ids predictable, reduces to total file size and is recommended.
46 | 
47 | To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
48 | 
49 | ```javascript
50 | // webpack.config.js
51 | var path = require('path')
52 | var webpack = require('webpack')
53 | 
54 | module.exports = {
55 |   entry: ['./src/index'],
56 |   output: {
57 |     path: path.join(__dirname, 'dist'),
58 |     filename: 'bundle.js'
59 |   },
60 |   plugins: [
61 |     new webpack.optimize.UglifyJsPlugin({
62 |       compressor: {
63 |         warnings: false,
64 |       },
65 |     }),
66 |     new webpack.optimize.OccurenceOrderPlugin()
67 |   ]
68 | }
69 | ```
70 | 
71 | So now we have written a config that allows us to minify and bundle our javascript. This bundle
72 | could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
73 | You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
74 | with *only javascript*.
75 | 


--------------------------------------------------------------------------------
/part1/example3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example3",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/part1/example3/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/part1/example3/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/part1/example4/README.md:
--------------------------------------------------------------------------------
 1 | Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
 2 | our code. In this case, the only loader we will need is the css loader. First we need to install the loader:
 3 | 
 4 |     npm install --save-dev style-loader css-loader
 5 | 
 6 | Now that it's installed we can tweak our config to include the css loader:
 7 | 
 8 | ```javascript
 9 | // webpack.config.js
10 | var path = require('path')
11 | var webpack = require('webpack')
12 | 
13 | module.exports = {
14 |   entry: ['./src/index'],
15 |   output: {
16 |     path: path.join(__dirname, 'dist'),
17 |     filename: 'bundle.js'
18 |   },
19 |   plugins: [
20 |     new webpack.optimize.UglifyJsPlugin({
21 |       compressor: {
22 |         warnings: false,
23 |       },
24 |     }),
25 |     new webpack.optimize.OccurenceOrderPlugin()
26 |   ],
27 |   module: {
28 |     loaders: [{
29 |       test: /\.css$/,
30 |       loaders: ['style', 'css']
31 |     }]
32 |   }
33 | }
34 | ```
35 | 
36 | Going over the new properties one by one:
37 | 
38 | * [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
39 |   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
40 |     * test - A regular expression to match the loader with a file
41 |     * loaders - Which loaders to use for files that match the test
42 | 
43 | This time when you run `webpack`, if we `require` a file that ends in `.css`, then we will apply
44 | the `style` and `css` loaders to it, which adds the CSS to the bundle.
45 | 
46 | If we didn't have the loaders,
47 | then we would get an error like this:
48 | 
49 | ```
50 | ERROR in ./test.css
51 | Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
52 | Line 1: Unexpected token {
53 | You may need an appropriate loader to handle this file type.
54 | ```
55 | 
56 | **Optional**
57 | 
58 | If you want to use SCSS instead of CSS you would need to run:
59 | 
60 |     npm install --save-dev sass-loader node-sass webpack
61 | 
62 | and instead your loader would be written as
63 | 
64 | ```javascript
65 | {
66 |   test: /\.scss$/,
67 |   loaders: ["style", "css", "sass"]
68 | }
69 | ```
70 | 
71 | The process is similar for LESS.
72 | 
73 | An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
74 | 


--------------------------------------------------------------------------------
/part1/example4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example4",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/part1/example4/src/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/part1/example4/src/index.html


--------------------------------------------------------------------------------
/part1/example4/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/part1/example4/src/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/part1/example4/src/styles.css


--------------------------------------------------------------------------------
/part1/example4/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/part1/example5/README.md:
--------------------------------------------------------------------------------
  1 | # Example 5 - Adding More Plugins
  2 | 
  3 | Now that we have the infrastructure for styling our website we need an actual page to style.
  4 | We'll be doing this through the
  5 | [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
  6 | which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
  7 | 
  8 | First we install the plugin:
  9 | 
 10 |     npm install --save-dev html-webpack-plugin@2
 11 | 
 12 | Then we can add it to our config
 13 | 
 14 | ```javascript
 15 | // webpack.config.js
 16 | var path = require('path')
 17 | var webpack = require('webpack')
 18 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 19 | 
 20 | module.exports = {
 21 |   entry: ['./src/index'],
 22 |   output: {
 23 |     path: path.join(__dirname, 'dist'),
 24 |     filename: 'bundle.js'
 25 |   },
 26 |   plugins: [
 27 |     new webpack.optimize.UglifyJsPlugin({
 28 |       compressor: {
 29 |         warnings: false,
 30 |       },
 31 |     }),
 32 |     new webpack.optimize.OccurenceOrderPlugin(),
 33 |     new HtmlWebpackPlugin({
 34 |       template: './src/index.html'
 35 |     })
 36 |   ],
 37 |   module: {
 38 |     loaders: [{
 39 |       test: /\.css$/,
 40 |       loaders: ['style', 'css']
 41 |     }]
 42 |   }
 43 | }
 44 | ```
 45 | 
 46 | This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
 47 | `./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
 48 | contents of `./src/index.html`
 49 | 
 50 | There's no point in using `index.html` as a template if it's empty. Now would be a good time to
 51 | actually populate it.
 52 | 
 53 | ```html
 54 | <html>
 55 | <head>
 56 |   <title>Webpack Tutorial</title>
 57 | </head>
 58 | <body>
 59 |   <h1>Very Website</h1>
 60 |   <section id="color"></section>
 61 |   <button id="button">Such Button</button>
 62 | 
 63 | </body>
 64 | </html>
 65 | ```
 66 | 
 67 | Note that we aren't putting a `<script>` tag into our HTML for `bundle.js`. The plugin will actually
 68 | automatically do that for you. If you do put in the script tag, you'll end up loading your same code twice.
 69 | 
 70 | and while we're at it let's add some basic styling in `styles.css`
 71 | 
 72 | ```css
 73 | h1 {
 74 |   color: rgb(114, 191, 190);
 75 |   text-align: center;
 76 | }
 77 | 
 78 | #color {
 79 |   width: 300px;
 80 |   height: 300px;
 81 |   margin: 0 auto;
 82 | }
 83 | 
 84 | button {
 85 |   cursor: pointer;
 86 |   display: block;
 87 |   width: 100px;
 88 |   outline: 0;
 89 |   border: 0;
 90 |   margin: 20px auto;
 91 | }
 92 | ```
 93 | 
 94 | #### Side note
 95 | 
 96 | I feel like I should mention that the `html-webpack-plugin` should
 97 | be used sparingly. To me, webpack should generate HTML files if you just have a really simple
 98 | one to bootstrap a SPA. So while it was useful for the learning experience, which required only
 99 | one HTML file, I wouldn't recommend it to generate 12 HTML files. This doesn't mean you can't use
100 | html files with something like angular directives, which require HTML template files. In that case
101 | you could do something like:
102 | 
103 | ```javascript
104 | // ...directive stuff
105 | template: require('./templates/button.html') // using raw loader
106 | ```
107 | 
108 | Instead, it means that you should not be doing something like this:
109 | 
110 | ```javascript
111 | new HtmlWebpackPlugin
112 |   template: './src/index.html'
113 | }),
114 | new HtmlWebpackPlugin({
115 |   template: './src/button.html'
116 | }),new HtmlWebpackPlugin({
117 |   template: './src/page2.html'
118 | })
119 | ```
120 | 
121 | Anyone with other experience feel free to correct me if I'm wrong.
122 | 


--------------------------------------------------------------------------------
/part1/example5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example5",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "html-webpack-plugin": "^2.8.1",
14 |     "webpack": "^1.12.13"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/part1/example5/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/part1/example5/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/part1/example5/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/part1/example5/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   entry: ['./src/index'],
 7 |   output: {
 8 |     path: path.join(__dirname, 'dist'),
 9 |     filename: 'bundle.js'
10 |   },
11 |   plugins: [
12 |     new webpack.optimize.UglifyJsPlugin({
13 |       compressor: {
14 |         warnings: false,
15 |       },
16 |     }),
17 |     new webpack.optimize.OccurrenceOrderPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/part1/example6/README.md:
--------------------------------------------------------------------------------
  1 | # Example 6 - The Development Server
  2 | 
  3 | Now we want to actually see our website in the browser, which requires a web server to serve our
  4 | code. Conveniently, webpack comes with the `webpack-dev-server`, which you need to install both
  5 | locally and globally
  6 | 
  7 |     npm install -g webpack-dev-server
  8 |     npm install --save-dev webpack-dev-server
  9 | 
 10 | The dev server is an extremely useful resource for seeing what your website looks like in the browser, and more rapid development. By default you can visit it at `http://localhost:8080`. Unfortunately, features such as hot reloading don't work out of the box, and require some more configuration.
 11 | 
 12 | This is a good point to split up our webpack config into one meant for development and one meant for
 13 | production. Since we're keeping it simple in this tutorial, it won't be a huge difference, but it's
 14 | an introduction to the extreme configurability of webpack. We'll call them `webpack.config.dev.js`
 15 | and `webpack.config.prod.js`.
 16 | 
 17 | ```javascript
 18 | // webpack.config.dev.js
 19 | var path = require('path')
 20 | var webpack = require('webpack')
 21 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 22 | 
 23 | module.exports = {
 24 |   devtool: 'cheap-eval-source-map',
 25 |   entry: [
 26 |     'webpack-dev-server/client?http://localhost:8080',
 27 |     'webpack/hot/dev-server',
 28 |     './src/index'
 29 |   ],
 30 |   output: {
 31 |     path: path.join(__dirname, 'dist'),
 32 |     filename: 'bundle.js'
 33 |   },
 34 |   plugins: [
 35 |     new webpack.HotModuleReplacementPlugin(),
 36 |     new HtmlWebpackPlugin({
 37 |       template: './src/index.html'
 38 |     })
 39 |   ],
 40 |   module: {
 41 |     loaders: [{
 42 |       test: /\.css$/,
 43 |       loaders: ['style', 'css']
 44 |     }]
 45 |   },
 46 |   devServer: {
 47 |     contentBase: './dist',
 48 |     hot: true
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | 
 54 | **Changes**
 55 | 
 56 | 1. The dev config omits the optimizations as they are unnecessary overhead when you are constantly
 57 | rebuilding. So no `webpack.optimize` plugins.
 58 | 
 59 | 2. The dev config has the necessary configuration for the dev server, which you can read more about
 60 | [here](https://webpack.github.io/docs/webpack-dev-server.html).
 61 | 
 62 | Summarized:
 63 | 
 64 | * entry: The two new entry points connect the server to the browser to allow for HMR.
 65 | * devServer
 66 |   * contentBase: Where to serve files from
 67 |   * hot: enable HMR
 68 | ---
 69 | 
 70 | The prod config doesn't change much
 71 | 
 72 | ```javascript
 73 | // webpack.config.prod.js
 74 | var path = require('path')
 75 | var webpack = require('webpack')
 76 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 77 | 
 78 | module.exports = {
 79 |   devtool: 'source-map',
 80 |   entry: ['./src/index'],
 81 |   output: {
 82 |     path: path.join(__dirname, 'dist'),
 83 |     filename: 'bundle.js'
 84 |   },
 85 |   plugins: [
 86 |     new webpack.optimize.UglifyJsPlugin({
 87 |       compressor: {
 88 |         warnings: false,
 89 |       },
 90 |     }),
 91 |     new webpack.optimize.OccurenceOrderPlugin(),
 92 |     new HtmlWebpackPlugin({
 93 |       template: './src/index.html'
 94 |     })
 95 |   ],
 96 |   module: {
 97 |     loaders: [{
 98 |       test: /\.css$/,
 99 |       loaders: ['style', 'css']
100 |     }]
101 |   }
102 | }
103 | ```
104 | 
105 | I've also added a brand new property to both the dev config and the prod config:
106 | 
107 | * [devtool](https://webpack.github.io/docs/configuration.html#devtool) - This is a debugging aid.
108 | Basically, when you get a error, it'll help you see where you made the mistake something like the
109 | chrome developer console. As for the difference between `source-map` and `cheap-eval-source-map`
110 | it's a little hard to glean from the docs. What I can say definitively is that `source-map` is meant
111 | for production and has a lot of overhead, and that `cheap-eval-source-map` has less overhead and is
112 | meant for developing only.
113 | 
114 | To run the dev server we have to run
115 | 
116 |     webpack-dev-server --config webpack.config.dev.js
117 | 
118 | and to build the production code we have to run
119 | 
120 |     webpack --config webpack.config.prod.js
121 | 
122 | 
123 | To make our lives a little easier we are now going to use `package.json` as a simple task runner so
124 | that we don't need to keep typing out either command.
125 | 
126 | We add them `scripts` property of the config
127 | 
128 | ```javascript
129 | // package.json
130 | {
131 |   //...
132 |   "scripts": {
133 |     "build": "webpack --config webpack.config.prod.js",
134 |     "dev"  : "webpack-dev-server --config webpack.config.dev.js"
135 |   }
136 |   //...
137 | }
138 | ```
139 | 
140 | We can run these commands with
141 | 
142 | ```
143 | npm run build
144 | npm run dev
145 | ```
146 | 
147 | You can now view your beautiful website by running `npm run dev`, and navigating to
148 | `http://localhost:8080`.
149 | 
150 | **Side Note:** while I was testing this portion I realized that the server would not hot reload
151 | when I modified the `index.html` file. The solution to this problem is over at
152 | [extra](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload). It's useful
153 | information that covers some more configuration options of webpack, which I recommend looking at,
154 | but I left it separate because I feel like it lengthens the tutorial for too trivial of a reason.
155 | 


--------------------------------------------------------------------------------
/part1/example6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "webpack": "^1.12.13",
16 |     "webpack-dev-server": "^1.14.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/part1/example6/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/part1/example6/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('hello there my friends')
2 | 


--------------------------------------------------------------------------------
/part1/example6/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/part1/example6/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/part1/example6/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/part1/example7/README.md:
--------------------------------------------------------------------------------
 1 | # Example 7 - Start Coding
 2 | 
 3 | The reason most people seem to be flustered by webpack is the fact that they need to go through all
 4 | of this to get to the point where they finally write javascript; however, now we have arrived at the
 5 | climax of our tutorial.
 6 | 
 7 | Just in case you haven't already: do `npm run dev`, and navigate to `http://localhost:8080`. Setting
 8 | up that dev server with hot reloading wasn't for show. Every single time you save while editing
 9 | any part of your project, the browser will reload to show your changes.
10 | 
11 | We are also going to require a npm package just to demonstrate how you can use them in your
12 | frontend now.
13 | 
14 |     npm install --save pleasejs
15 | 
16 | PleaseJS is a random color generator, which we're going to hook up to our button to change the color
17 | of our div.
18 | 
19 | ```javascript
20 | // index.js
21 | 
22 | // Accept hot module reloading
23 | if (module.hot) {
24 |   module.hot.accept()
25 | }
26 | 
27 | require('./styles.css') // The page is now styled
28 | var Please = require('pleasejs')
29 | var div = document.getElementById('color')
30 | var button = document.getElementById('button')
31 | 
32 | function changeColor() {
33 |   div.style.backgroundColor = Please.make_color()
34 | }
35 | 
36 | button.addEventListener('click', changeColor)
37 | ```
38 | 
39 | Interestingly, [in order for Hot Module Replacement to work](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
40 | You need to include the code:
41 | 
42 | ```javascript
43 | if (module.hot) {
44 |   module.hot.accept()
45 | }
46 | ```
47 | 
48 | in a module or a parent of that module.
49 | 


--------------------------------------------------------------------------------
/part1/example7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example7",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "html-webpack-plugin": "^2.8.1",
16 |     "style-loader": "^0.13.0",
17 |     "webpack": "^1.12.13",
18 |     "webpack-dev-server": "^1.14.1"
19 |   },
20 |   "dependencies": {
21 |     "pleasejs": "^0.4.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/part1/example7/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/part1/example7/src/index.js:
--------------------------------------------------------------------------------
 1 | // Accept hot module reloading
 2 | if (module.hot) {
 3 |   module.hot.accept()
 4 | }
 5 | 
 6 | require('./styles.css') // The page is now styled
 7 | var Please = require('pleasejs')
 8 | var div = document.getElementById('color')
 9 | var button = document.getElementById('button')
10 | 
11 | function changeColor() {
12 |   div.style.backgroundColor = Please.make_color()
13 |   console.log('HMR works no')
14 | }
15 | 
16 | button.addEventListener('click', changeColor)
17 | 


--------------------------------------------------------------------------------
/part1/example7/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/part1/example7/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/part1/example7/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/part1/html-reload/README.md:
--------------------------------------------------------------------------------
  1 | # Extra - Make your HTML hot reload
  2 | 
  3 | So while I was testing I realized that index.html would not hot reload! After searching for a bit
  4 | I finally came across
  5 | [this helpful answer](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin),
  6 | which will require
  7 | [one more loader](https://github.com/webpack/raw-loader) to make our hacky solution come to life,
  8 | and [one more plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to prevent
  9 | our hacky solution from going into production.
 10 | 
 11 | Basically to make Webpack hot reload our HTML we need to make it part of our dependency tree by
 12 | requiring it in one of our files. In order to do this, we will be using the `raw-loader` loader,
 13 | which pulls our HTML into javascript as a string, but additionally will do exactly what we need:
 14 | add the HTML to the dependency tree.
 15 | 
 16 | So lets add the loader to our dev config:
 17 | 
 18 | First we install with
 19 | 
 20 |     npm install --save-dev raw-loader
 21 | 
 22 | Then we can add it:
 23 | 
 24 | ```javascript
 25 | // webpack.config.dev.js
 26 | var path = require('path')
 27 | var webpack = require('webpack')
 28 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 29 | 
 30 | module.exports = {
 31 |   devtool: 'cheap-eval-source-map',
 32 |   entry: [
 33 |     'webpack-dev-server/client?http://localhost:8080',
 34 |     'webpack/hot/dev-server',
 35 |     './src/index'
 36 |   ],
 37 |   output: {
 38 |     path: path.join(__dirname, 'dist'),
 39 |     filename: 'bundle.js'
 40 |   },
 41 |   plugins: [
 42 |     new webpack.HotModuleReplacementPlugin(),
 43 |     new HtmlWebpackPlugin({
 44 |       template: './src/index.html'
 45 |     })
 46 |   ],
 47 |   module: {
 48 |     loaders: [{
 49 |       test: /\.css$/,
 50 |       loaders: ['style', 'css']
 51 |     }, {
 52 |       test: /\.html$/,
 53 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
 54 |     }]
 55 |   },
 56 |   devServer: {
 57 |     contentBase: './dist',
 58 |     hot: true
 59 |   }
 60 | }
 61 | ```
 62 | 
 63 | This time, when you run `webpack`, if we `require` a file that ends in `.html`, then we will apply
 64 | the `raw-loader` loader to it, which adds the HTML to the bundle.
 65 | 
 66 | Now in our currently empty `index.js` file we can do.
 67 | 
 68 | ```javascript
 69 | // index.js
 70 | require('./index.html')
 71 | ```
 72 | 
 73 | If you were to check now, hot reloading should be working, but also you should realize we just
 74 | required `index.html` in our `index.js`, and then did absolutely nothing with it. We don't want
 75 | to do that in production, which is why we will be using the handy dandy
 76 | [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin).
 77 | 
 78 | The plugin lets us create a global constant for our entire bundle, which we could name anything,
 79 | such as `DONT_USE_IN_PRODUCTION: true`, but more practically, a popular choice that looks a bit more
 80 | familiar is `process.env.NODE_ENV: JSON.stringify('production')`. Why JSON.stringify? Because
 81 | according to the docs:
 82 | 
 83 | > If the value is a string it will be used as a code fragment.
 84 | 
 85 | Now that we know that, we'll be adding this plugin to our production config:
 86 | 
 87 | ```javascript
 88 | // webpack.config.prod.js
 89 | var path = require('path')
 90 | var webpack = require('webpack')
 91 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 92 | 
 93 | module.exports = {
 94 |   devtool: 'source-map',
 95 |   entry: ['./src/index'],
 96 |   output: {
 97 |     path: path.join(__dirname, 'dist'),
 98 |     filename: 'bundle.js'
 99 |   },
100 |   plugins: [
101 |     new webpack.optimize.UglifyJsPlugin({
102 |       compressor: {
103 |         warnings: false,
104 |       },
105 |     }),
106 |     new webpack.optimize.OccurenceOrderPlugin(),
107 |     new HtmlWebpackPlugin({
108 |       template: './src/index.html'
109 |     }),
110 |     new webpack.DefinePlugin({
111 |       'process.env.NODE_ENV': JSON.stringify('production')
112 |     })
113 |   ],
114 |   module: {
115 |     loaders: [{
116 |       test: /\.css$/,
117 |       loaders: ['style', 'css']
118 |     }]
119 |   }
120 | }
121 | ```
122 | 
123 | and in our `index.js` we will add a condition
124 | 
125 | ```javascript
126 | if (process.env.NODE_ENV !== 'production') {
127 |   require('./index.html')
128 | }
129 | ```
130 | 
131 | Phew problem solved. In a production build, when we don't need the `index.html` as part of the
132 | dependency tree, we won't require `index.html`, which also means we don't need the `raw-loader`.
133 | 


--------------------------------------------------------------------------------
/part1/html-reload/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "raw-loader": "^0.5.1",
16 |     "webpack": "^1.12.13",
17 |     "webpack-dev-server": "^1.14.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/part1/html-reload/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/part1/html-reload/src/index.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV !== 'production') {
2 |   require('./index.html')
3 | }
4 | 


--------------------------------------------------------------------------------
/part1/html-reload/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 | }
 4 | 
 5 | #color {
 6 |   width: 300px;
 7 |   height: 300px;
 8 |   margin: 0 auto;
 9 | }
10 | 
11 | button {
12 |   cursor: pointer;
13 |   display: inline-block;
14 |   height: 20px;
15 |   background-color: rgb(123, 109, 198);
16 |   color: rgb(255, 255, 255);
17 |   padding: 10px 5px;
18 |   border-radius: 4px;
19 |   border-bottom: 2px solid rgb(143, 132, 200);
20 | }
21 | 


--------------------------------------------------------------------------------
/part1/html-reload/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }, {
27 |       test: /\.html$/,
28 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
29 |     }]
30 |   },
31 |   devServer: {
32 |     contentBase: './dist',
33 |     hot: true
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/part1/html-reload/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     }),
22 |     new webpack.DefinePlugin({
23 |       'process.env.NODE_ENV': JSON.stringify('production')
24 |     })
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/part2/example1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }
4 | 


--------------------------------------------------------------------------------
/part2/example1/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb/base",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "comma-dangle": 0,
 6 |     "no-console": 0,
 7 |     "semi": [2, "never"],
 8 |     "func-names": 0,
 9 |     "space-before-function-paren": 0,
10 |     "no-multi-spaces": 0,
11 |     "babel/generator-star-spacing": 1,
12 |     "babel/new-cap": 1,
13 |     "babel/object-shorthand": 1,
14 |     "babel/arrow-parens": 1,
15 |     "babel/no-await-in-loop": 1
16 |   },
17 |   "plugins": [
18 |     "babel"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/part2/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js",
 9 |     "lint": "eslint src"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "babel-core": "^6.9.1",
16 |     "babel-eslint": "^6.0.4",
17 |     "babel-loader": "^6.2.4",
18 |     "babel-preset-es2015": "^6.9.0",
19 |     "babel-preset-stage-2": "^6.5.0",
20 |     "css-loader": "^0.23.1",
21 |     "eslint": "^2.12.0",
22 |     "eslint-config-airbnb-base": "^3.0.1",
23 |     "eslint-plugin-babel": "^3.2.0",
24 |     "html-webpack-plugin": "^2.21.0",
25 |     "style-loader": "^0.13.1",
26 |     "webpack": "^1.13.1",
27 |     "webpack-dev-server": "^1.14.1"
28 |   },
29 |   "dependencies": {
30 |     "pleasejs": "^0.4.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/part2/example1/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/part2/example1/src/index.js:
--------------------------------------------------------------------------------
 1 | import Please from 'pleasejs' // use es6 module import
 2 | require('./styles.css') // The page is now styled
 3 | 
 4 | // Accept hot module reloading during development
 5 | if (process.env.NODE_ENV !== 'production') {
 6 |   if (module.hot) {
 7 |     module.hot.accept()
 8 |   }
 9 | }
10 | 
11 | const div = document.getElementById('color')
12 | const button = document.getElementById('button')
13 | const changeColor = () => div.style.backgroundColor = Please.make_color()
14 | 
15 | button.addEventListener('click', changeColor)
16 | 


--------------------------------------------------------------------------------
/part2/example1/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/part2/example1/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'cheap-eval-source-map',
 9 |   entry: [
10 |     'webpack-dev-server/client?http://localhost:8080',
11 |     'webpack/hot/dev-server',
12 |     './src/index'
13 |   ],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.HotModuleReplacementPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     })
23 |   ],
24 |   module: {
25 |     loaders: [{
26 |       test: /\.css$/,
27 |       loaders: ['style', 'css']
28 |     }, {
29 |       test: /\.js$/,
30 |       loaders: ['babel'],
31 |       include: path.join(__dirname, 'src')
32 |     }]
33 |   },
34 |   devServer: {
35 |     contentBase: './dist',
36 |     hot: true
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/part2/example1/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'source-map',
 9 |   entry: ['./src/index'],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js'
13 |   },
14 |   plugins: [
15 |     new webpack.optimize.UglifyJsPlugin({
16 |       compressor: {
17 |         warnings: false,
18 |       },
19 |     }),
20 |     new webpack.optimize.OccurrenceOrderPlugin(),
21 |     new HtmlWebpackPlugin({
22 |       template: './src/index.html'
23 |     }),
24 |     new webpack.DefinePlugin({
25 |       'process.env.NODE_ENV': JSON.stringify('production')
26 |     })
27 |   ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.css$/,
31 |       loaders: ['style', 'css']
32 |     }, {
33 |       test: /\.js$/,
34 |       loaders: ['babel'],
35 |       include: path.join(__dirname, 'src')
36 |     }]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/zh-TW/README.md:
--------------------------------------------------------------------------------
1 | # Webpack 初學者教學課程 :school:
2 | 
3 | Webpack 剛開始對我來說是很困難的，所以我想要建立一個對初學者友善，而且對 webpack 有著非常全面的介紹教學。
4 | 
5 | - [Part 1](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1) - Webpack 基礎和設定。
6 | - [Part 2](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part2) - Babel、Lint、以及環境變數。
7 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/README.md:
--------------------------------------------------------------------------------
 1 | # 番外 - 提取你的 CSS
 2 | 
 3 | 好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用 [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
 4 | 
 5 |     npm install --save-dev extract-text-webpack-plugin
 6 | 
 7 | 我們需要改變我們的 webpack prod 設定檔案：
 8 | 
 9 | ```javascript
10 | var path = require('path')
11 | var webpack = require('webpack')
12 | var HtmlWebpackPlugin = require('html-webpack-plugin')
13 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
14 | 
15 | module.exports = {
16 |   devtool: 'source-map',
17 |   entry: ['./src/index'],
18 |   output: {
19 |     path: path.join(__dirname, 'dist'),
20 |     filename: 'bundle.js'
21 |   },
22 |   plugins: [
23 |     new webpack.optimize.UglifyJsPlugin({
24 |       compressor: {
25 |         warnings: false,
26 |       },
27 |     }),
28 |     new webpack.optimize.OccurenceOrderPlugin(),
29 |     new HtmlWebpackPlugin({
30 |       template: './src/index.html'
31 |     }),
32 |     new ExtractTextPlugin("styles.css")
33 |   ],
34 |   module: {
35 |     loaders: [{
36 |       test: /\.css$/,
37 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
38 |     }]
39 |   }
40 | }
41 | ```
42 | 
43 | 這些修改來自[官方 repository](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
44 | 
45 | > 它在進入點將每個 require("style.css") chunk 成獨立的 css 輸出檔案。所以你的樣式不會在 JavaScript 內，但是它會被分離到一個 css bundle 檔案（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 時，stylesheet bundle 會被平行的載入，可以加快載入的速度。
46 | 
47 | 如果現在你執行 `npm run build`，你的 CSS 會被獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
48 | 
49 | ```html
50 | <html>
51 | <head>
52 |   <title>Webpack Tutorial</title>
53 | <link href="styles.css" rel="stylesheet"> <------ MAGICALLY ADDED
54 | </head>
55 | <body>
56 |   <h1>Very Website</h1>
57 |   <section id="color"></section>
58 |   <button id="button">Such Button</button>
59 | <script src="bundle.js"></script></body>
60 | </html>
61 | ```
62 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-extract",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "extract-text-webpack-plugin": "^1.0.1",
16 |     "html-webpack-plugin": "^2.8.1",
17 |     "style-loader": "^0.13.0",
18 |     "webpack": "^1.12.13",
19 |     "webpack-dev-server": "^1.14.1"
20 |   },
21 |   "dependencies": {
22 |     "pleasejs": "^0.4.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/src/changeColor.js:
--------------------------------------------------------------------------------
 1 | var Please = require('pleasejs')
 2 | var div = document.getElementById('color')
 3 | var button = document.getElementById('button')
 4 | 
 5 | function changeColor() {
 6 |   div.style.backgroundColor = Please.make_color()
 7 |   console.log('pls do work')
 8 | }
 9 | 
10 | button.addEventListener('click', changeColor)
11 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./changeColor.js')
3 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-TW/part1/css-extract/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 | 
 6 | module.exports = {
 7 |   devtool: 'source-map',
 8 |   entry: ['./src/index'],
 9 |   output: {
10 |     path: path.join(__dirname, 'dist'),
11 |     filename: 'bundle.js'
12 |   },
13 |   plugins: [
14 |     new webpack.optimize.UglifyJsPlugin({
15 |       compressor: {
16 |         warnings: false,
17 |       },
18 |     }),
19 |     new webpack.optimize.OccurrenceOrderPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     }),
23 |     new ExtractTextPlugin("styles.css")
24 |   ],
25 |   module: {
26 |     loaders: [{
27 |       test: /\.css$/,
28 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/README.md:
--------------------------------------------------------------------------------
 1 | # 範例一 - Bundle 和 Loader
 2 | 
 3 | ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 4 | 
 5 | Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
 6 | [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
 7 | 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
 8 | 我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
 9 | 這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
10 | 
11 | 這裡是一個簡單的範例：
12 | 
13 | ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
14 | 
15 | 根據這樣的情況，你可以有這樣的目錄：
16 | 
17 | ```
18 | MyDirectory
19 | |- index.js
20 | |- UIStuff.js
21 | |- APIStuff.js
22 | |- styles.css
23 | |- extraFile.js
24 | ```
25 | 
26 | 這些可能是你檔案的內容：
27 | 
28 | ```javascript
29 | // index.js
30 | require('./styles.css')
31 | require('./UIStuff.js')
32 | require('./APIStuff.js')
33 | 
34 | // UIStuff.js
35 | var React = require('React')
36 | React.createClass({
37 |   // stuff
38 | })
39 | 
40 | // APIStuff.js
41 | var fetch = require('fetch') // fetch polyfill
42 | fetch('https://google.com')
43 | ```
44 | 
45 | ```css
46 | /* styles.css */
47 | body {
48 |   background-color: rgb(200, 56, 97);
49 | }
50 | ```
51 | 
52 | 當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
53 | 
54 | `bundle.js` 看起來會像：
55 | 
56 | ```javascript
57 | // contents of styles.css
58 | // contents of UIStuff.js + React
59 | // contents of APIStuff.js + fetch
60 | ```
61 | 
62 | 被 bundle 的這些檔案是你明確所 require 進來的檔案。
63 | 
64 | ### Loaders
65 | 
66 | 你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
67 | 
68 | 關於 webpack 真的很酷，有趣的事情是，你可以 `require` 其他不只是 JavaScript 的檔案。
69 | 
70 | 在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 檔。
71 | 
72 | 例如在上圖我有：
73 | 
74 | ```javascript
75 | // index.js
76 | require('./styles.css')
77 | ```
78 | 
79 | 如果在我的 webpack 設定檔中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這是可行的，還可以實際應用 CSS 到我的網頁。
80 | 
81 | 你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
82 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "fetch": "^1.0.0",
14 |     "react": "^0.14.7"
15 |   },
16 |   "devDependencies": {
17 |     "css-loader": "^0.23.1",
18 |     "style-loader": "^0.13.0",
19 |     "webpack": "^1.12.14"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/src/APIStuff.js:
--------------------------------------------------------------------------------
1 | var fetch = require('fetch') // fetch polyfill
2 | fetch('https://google.com')
3 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/src/UIStuff.js:
--------------------------------------------------------------------------------
1 | var React = require('React')
2 | React.createClass({
3 |   // stuff
4 | })
5 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/src/extraFile.js:
--------------------------------------------------------------------------------
1 | console.log('No one likes me')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./UIStuff.js')
3 | require('./APIStuff.js')
4 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: rgb(200, 56, 97);
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example1/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example2/README.md:
--------------------------------------------------------------------------------
 1 | # 範例二 - 一個簡單的範例
 2 | 
 3 | 你的目錄結構像是這樣：
 4 | 
 5 | ```
 6 | MyDirectory
 7 | |- dist
 8 | |- src
 9 |    |- index.js
10 | |- webpack.config.js
11 | 
12 | ```
13 | 
14 | 然後這是一個非常簡易的 webpack 設定：
15 | 
16 | ```javascript
17 | // webpack.config.js
18 | var path = require('path')
19 | 
20 | module.exports = {
21 |   entry: ['./src/index'], // .js after index is optional
22 |   output: {
23 |     path: path.join(__dirname, 'dist'),
24 |     filename: 'bundle.js'
25 |   }
26 | }
27 | ```
28 | 
29 | 我們一個一個複習這些屬性：
30 | 
31 | * [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
32 | 
33 | * [output](https://webpack.github.io/docs/configuration.html#output) - 由 webpack 規定的形式輸出。
34 |   * [path](https://webpack.github.io/docs/configuration.html#output-path) - bundle 檔案位置。
35 |   * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 檔案名稱。
36 | 
37 | 當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
38 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example2",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT"
12 | }
13 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example2/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example2/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: ['./src/index'], // .js after index is optional
 5 |   output: {
 6 |     path: path.join(__dirname, 'dist'),
 7 |     filename: 'bundle.js'
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example3/README.md:
--------------------------------------------------------------------------------
 1 | # 範例三 - 介紹 Plugins
 2 | 
 3 | 想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 4 | 
 5 | 此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 6 | 
 7 |     npm install --save-dev webpack
 8 | 
 9 | 現在你可以 require webpack 並 minify 你的程式碼。
10 | 
11 | ```javascript
12 | // webpack.config.js
13 | var path = require('path')
14 | var webpack = require('webpack')
15 | 
16 | module.exports = {
17 |   entry: ['./src/index'],
18 |   output: {
19 |     path: path.join(__dirname, 'dist'),
20 |     filename: 'bundle.js'
21 |   },
22 | 
23 |   plugins: [
24 |     new webpack.optimize.UglifyJsPlugin({
25 |       compressor: {
26 |         warnings: false,
27 |       },
28 |     })
29 |   ]
30 | }
31 | ```
32 | 我們一個一個複習這些屬性：
33 | 
34 | * plugins - 一個可以儲存你的 plugin 的陣列。
35 |   * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
36 | 
37 | 這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
38 | 
39 | 你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
40 | 
41 | > 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，減少檔案的大小和建議。
42 | 
43 | 老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
44 | 
45 | ```javascript
46 | // webpack.config.js
47 | var path = require('path')
48 | var webpack = require('webpack')
49 | 
50 | module.exports = {
51 |   entry: ['./src/index'],
52 |   output: {
53 |     path: path.join(__dirname, 'dist'),
54 |     filename: 'bundle.js'
55 |   },
56 |   plugins: [
57 |     new webpack.optimize.UglifyJsPlugin({
58 |       compressor: {
59 |         warnings: false,
60 |       },
61 |     }),
62 |     new webpack.optimize.OccurenceOrderPlugin()
63 |   ]
64 | }
65 | ```
66 | 
67 | 所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
68 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example3",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example3/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example3/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example4/README.md:
--------------------------------------------------------------------------------
 1 | 在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
 2 | 
 3 |     npm install --save-dev style-loader css-loader
 4 | 
 5 | 現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
 6 | 
 7 | ```javascript
 8 | // webpack.config.js
 9 | var path = require('path')
10 | var webpack = require('webpack')
11 | 
12 | module.exports = {
13 |   entry: ['./src/index'],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.optimize.UglifyJsPlugin({
20 |       compressor: {
21 |         warnings: false,
22 |       },
23 |     }),
24 |     new webpack.optimize.OccurenceOrderPlugin()
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | ```
34 | 
35 | 我們一個一個複習這些屬性：
36 | 
37 | * [module](http://webpack.github.io/docs/configuration.html#module) - 設定你的檔案選項。
38 |   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - 我們為應用程式所指定的一個 loader 陣列。
39 |     * test - 一個正規表達式來匹配 loader 的檔案。
40 |     * loaders - loader 用於這些匹配 test （正規表達式）的檔案。
41 | 
42 | 這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
43 | 
44 | 如果我們沒有 loaders，我們會得到像是這樣的錯誤：
45 | 
46 | ```
47 | ERROR in ./test.css
48 | Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
49 | Line 1: Unexpected token {
50 | You may need an appropriate loader to handle this file type.
51 | ```
52 | 
53 | **可選項目**
54 | 
55 | 如果你想要使用 SCSS 而不是 CSS 你需要執行：
56 | 
57 |     npm install --save-dev sass-loader node-sass webpack
58 | 
59 | 然後你的 loader 必須修改成：
60 | 
61 | ```javascript
62 | {
63 |   test: /\.scss$/,
64 |   loaders: ["style", "css", "sass"]
65 | }
66 | ```
67 | 
68 | 處理 LESS 也類似於這個方式。
69 | 
70 | 要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
71 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example4",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example4/src/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/zh-TW/part1/example4/src/index.html


--------------------------------------------------------------------------------
/zh-TW/part1/example4/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example4/src/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/zh-TW/part1/example4/src/styles.css


--------------------------------------------------------------------------------
/zh-TW/part1/example4/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/README.md:
--------------------------------------------------------------------------------
  1 | # 範例五 - 加入更多的 Plugin
  2 | 
  3 | 現在我們的網站有一些基礎了，但我們還需要實際的網站樣式。
  4 | 
  5 | 我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
  6 | 
  7 | 首先我們需要安裝 plugin：
  8 | 
  9 |     npm install --save-dev html-webpack-plugin@2
 10 | 
 11 | 然後在我們的 webpack 設定檔加入：
 12 | 
 13 | ```javascript
 14 | // webpack.config.js
 15 | var path = require('path')
 16 | var webpack = require('webpack')
 17 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 18 | 
 19 | module.exports = {
 20 |   entry: ['./src/index'],
 21 |   output: {
 22 |     path: path.join(__dirname, 'dist'),
 23 |     filename: 'bundle.js'
 24 |   },
 25 |   plugins: [
 26 |     new webpack.optimize.UglifyJsPlugin({
 27 |       compressor: {
 28 |         warnings: false,
 29 |       },
 30 |     }),
 31 |     new webpack.optimize.OccurenceOrderPlugin(),
 32 |     new HtmlWebpackPlugin({
 33 |       template: './src/index.html'
 34 |     })
 35 |   ],
 36 |   module: {
 37 |     loaders: [{
 38 |       test: /\.css$/,
 39 |       loaders: ['style', 'css']
 40 |     }]
 41 |   }
 42 | }
 43 | ```
 44 | 
 45 | 這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
 46 | 
 47 | 如果 `index.html` 作為 template 是空的也沒用，現在是個好時機我們可以填入一些元素進去。
 48 | 
 49 | ```html
 50 | <html>
 51 | <head>
 52 |   <title>Webpack Tutorial</title>
 53 | </head>
 54 | <body>
 55 |   <h1>Very Website</h1>
 56 |   <section id="color"></section>
 57 |   <button id="button">Such Button</button>
 58 | 
 59 | </body>
 60 | </html>
 61 | ```
 62 | 
 63 | 注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
 64 | 
 65 | 而讓我們加入一些基本的樣式在 `styles.css`：
 66 | 
 67 | ```css
 68 | h1 {
 69 |   color: rgb(114, 191, 190);
 70 |   text-align: center;
 71 | }
 72 | 
 73 | #color {
 74 |   width: 300px;
 75 |   height: 300px;
 76 |   margin: 0 auto;
 77 | }
 78 | 
 79 | button {
 80 |   cursor: pointer;
 81 |   display: block;
 82 |   width: 100px;
 83 |   outline: 0;
 84 |   border: 0;
 85 |   margin: 20px auto;
 86 | }
 87 | ```
 88 | 
 89 | #### 備註
 90 | 
 91 | 我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 個 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
 92 | 
 93 | ```javascript
 94 | // ...directive stuff
 95 | template: require('./templates/button.html') // 使用 raw loader
 96 | ```
 97 | 
 98 | 相反的，它意味著你不應該做這樣的事情︰
 99 | 
100 | ```javascript
101 | new HtmlWebpackPlugin
102 |   template: './src/index.html'
103 | }),
104 | new HtmlWebpackPlugin({
105 |   template: './src/button.html'
106 | }),new HtmlWebpackPlugin({
107 |   template: './src/page2.html'
108 | })
109 | ```
110 | 
111 | 如果我這個部份我搞錯了，請任何有這方面經驗的人隨時糾正我。
112 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example5",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "html-webpack-plugin": "^2.8.1",
14 |     "webpack": "^1.12.13"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example5/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   entry: ['./src/index'],
 7 |   output: {
 8 |     path: path.join(__dirname, 'dist'),
 9 |     filename: 'bundle.js'
10 |   },
11 |   plugins: [
12 |     new webpack.optimize.UglifyJsPlugin({
13 |       compressor: {
14 |         warnings: false,
15 |       },
16 |     }),
17 |     new webpack.optimize.OccurrenceOrderPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/README.md:
--------------------------------------------------------------------------------
  1 | # 範例六 - 開發伺服器
  2 | 
  3 | 現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
  4 | 
  5 |     npm install -g webpack-dev-server
  6 |     npm install --save-dev webpack-dev-server
  7 | 
  8 | dev server 可以在瀏覽器看到你的網站外觀也可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reload 的功能並不是內建的，還需要一些其他的設定。
  9 | 
 10 | 這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 11 | 
 12 | ```javascript
 13 | // webpack.config.dev.js
 14 | var path = require('path')
 15 | var webpack = require('webpack')
 16 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 17 | 
 18 | module.exports = {
 19 |   devtool: 'cheap-eval-source-map',
 20 |   entry: [
 21 |     'webpack-dev-server/client?http://localhost:8080',
 22 |     'webpack/hot/dev-server',
 23 |     './src/index'
 24 |   ],
 25 |   output: {
 26 |     path: path.join(__dirname, 'dist'),
 27 |     filename: 'bundle.js'
 28 |   },
 29 |   plugins: [
 30 |     new webpack.HotModuleReplacementPlugin(),
 31 |     new HtmlWebpackPlugin({
 32 |       template: './src/index.html'
 33 |     })
 34 |   ],
 35 |   module: {
 36 |     loaders: [{
 37 |       test: /\.css$/,
 38 |       loaders: ['style', 'css']
 39 |     }]
 40 |   },
 41 |   devServer: {
 42 |     contentBase: './dist',
 43 |     hot: true
 44 |   }
 45 | }
 46 | ```
 47 | 
 48 | 
 49 | **修改**
 50 | 
 51 | 1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們是不必要的。所以不需要 `webpack.optimize` plugins。
 52 | 
 53 | 2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 54 | 
 55 | 總結：
 56 | 
 57 | * entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
 58 | * devServer
 59 |   * contentBase: 服務的檔案來自哪裡。
 60 |   * hot: 啟用 HMR。
 61 | ---
 62 | 
 63 | prod 設定檔不需要改變太多：
 64 | 
 65 | ```javascript
 66 | // webpack.config.prod.js
 67 | var path = require('path')
 68 | var webpack = require('webpack')
 69 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 70 | 
 71 | module.exports = {
 72 |   devtool: 'source-map',
 73 |   entry: ['./src/index'],
 74 |   output: {
 75 |     path: path.join(__dirname, 'dist'),
 76 |     filename: 'bundle.js'
 77 |   },
 78 |   plugins: [
 79 |     new webpack.optimize.UglifyJsPlugin({
 80 |       compressor: {
 81 |         warnings: false,
 82 |       },
 83 |     }),
 84 |     new webpack.optimize.OccurenceOrderPlugin(),
 85 |     new HtmlWebpackPlugin({
 86 |       template: './src/index.html'
 87 |     })
 88 |   ],
 89 |   module: {
 90 |     loaders: [{
 91 |       test: /\.css$/,
 92 |       loaders: ['style', 'css']
 93 |     }]
 94 |   }
 95 | }
 96 | ```
 97 | 
 98 | 我也加入一個全新的屬性在 dev 和 prod 的設定檔：
 99 | 
100 | * [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 這是協助 debug 的工具。基本上，當你得到一個錯誤，它會幫助你找到哪裡發生了錯誤，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之間的差異從文件說明有點難解釋。我可以肯定的是，`source-map` 是用於 `production`，`cheap-eval-source-map` 是用於 `development`。
101 | 
102 | 如果要執行 dev server，我們可以執行：
103 | 
104 |     webpack-dev-server --config webpack.config.dev.js
105 | 
106 | 如果我們要 build production 的程式碼，我們可以執
107 | 
108 |     webpack --config webpack.config.prod.js
109 | 
110 | 
111 | 如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
112 | 
113 | 我們加入 `scripts` 屬性到設定檔：
114 | 
115 | ```javascript
116 | // package.json
117 | {
118 |   //...
119 |   "scripts": {
120 |     "build": "webpack --config webpack.config.prod.js",
121 |     "dev"  : "webpack-dev-server --config webpack.config.dev.js"
122 |   }
123 |   //...
124 | }
125 | ```
126 | 
127 | 我們可以執行這些指令：
128 | 
129 | ```
130 | npm run build
131 | npm run dev
132 | ```
133 | 
134 | 你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
135 | 
136 | **備註：** 當我正在測試這個部份時，我了解到，當我修改 `index.html` 檔案時，伺服器不能 hot reload。解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
137 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "webpack": "^1.12.13",
16 |     "webpack-dev-server": "^1.14.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('hello there my friends')
2 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example6/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/README.md:
--------------------------------------------------------------------------------
 1 | # 範例七 - 開始撰寫程式
 2 | 
 3 | 大多數的人會慌亂的原因似乎是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
 4 | 
 5 | 如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 是不是可以 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
 6 | 
 7 | 我們也需要一個 npm package，為了來示範如何在前端使用它們。
 8 | 
 9 |     npm install --save pleasejs
10 | 
11 | PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
12 | 
13 | ```javascript
14 | // index.js
15 | 
16 | // 接受 hot module reloading
17 | if (module.hot) {
18 |   module.hot.accept()
19 | }
20 | 
21 | require('./styles.css') // 網頁現在有了樣式
22 | var Please = require('pleasejs')
23 | var div = document.getElementById('color')
24 | var button = document.getElementById('button')
25 | 
26 | function changeColor() {
27 |   div.style.backgroundColor = Please.make_color()
28 | }
29 | 
30 | button.addEventListener('click', changeColor)
31 | ```
32 | 
33 | 有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
34 | 
35 | ```javascript
36 | if (module.hot) {
37 |   module.hot.accept()
38 | }
39 | ```
40 | 
41 | 在一個 module 或是它的父 module。
42 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example7",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "html-webpack-plugin": "^2.8.1",
16 |     "style-loader": "^0.13.0",
17 |     "webpack": "^1.12.13",
18 |     "webpack-dev-server": "^1.14.1"
19 |   },
20 |   "dependencies": {
21 |     "pleasejs": "^0.4.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/src/index.js:
--------------------------------------------------------------------------------
 1 | // Accept hot module reloading
 2 | if (module.hot) {
 3 |   module.hot.accept()
 4 | }
 5 | 
 6 | require('./styles.css') // The page is now styled
 7 | var Please = require('pleasejs')
 8 | var div = document.getElementById('color')
 9 | var button = document.getElementById('button')
10 | 
11 | function changeColor() {
12 |   div.style.backgroundColor = Please.make_color()
13 |   console.log('HMR works no')
14 | }
15 | 
16 | button.addEventListener('click', changeColor)
17 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-TW/part1/example7/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/README.md:
--------------------------------------------------------------------------------
  1 | # 番外 - 讓你的 HTML 可以 hot reload
  2 | 
  3 | 所以，當我測試的時候我才知道 `index.html` 不會被 hot reload！在之後搜尋的結果，我最後找到了[有幫助的答案](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin)，
  4 | 這需要一個 [loader](https://github.com/webpack/raw-loader) 來讓我們 hacky，也需要另一個 [plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 來防止這個 hacky 到 production。
  5 | 
  6 | 基本上要讓 webpack 可以 hot reload 我們的 HTML，我們需要 require 我們其中檔案之一，讓它變成我們 dependency tree 的一部份。為了做到這一點，我們將會使用 `raw-loader` loader，它可以 pull 我們的 HTML 變成字串到我們的 JavaScript，但是另外我們真正需要做的是：加入 HTML 到 dependency tree。
  7 | 
  8 | 所以讓我們加入這個 loader 到我們的 dev 設定檔：
  9 | 
 10 | 首先我們需要安裝：
 11 | 
 12 |     npm install --save-dev raw-loader
 13 | 
 14 | 然我們加入：
 15 | 
 16 | ```javascript
 17 | // webpack.config.dev.js
 18 | var path = require('path')
 19 | var webpack = require('webpack')
 20 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 21 | 
 22 | module.exports = {
 23 |   devtool: 'cheap-eval-source-map',
 24 |   entry: [
 25 |     'webpack-dev-server/client?http://localhost:8080',
 26 |     'webpack/hot/dev-server',
 27 |     './src/index'
 28 |   ],
 29 |   output: {
 30 |     path: path.join(__dirname, 'dist'),
 31 |     filename: 'bundle.js'
 32 |   },
 33 |   plugins: [
 34 |     new webpack.HotModuleReplacementPlugin(),
 35 |     new HtmlWebpackPlugin({
 36 |       template: './src/index.html'
 37 |     })
 38 |   ],
 39 |   module: {
 40 |     loaders: [{
 41 |       test: /\.css$/,
 42 |       loaders: ['style', 'css']
 43 |     }, {
 44 |       test: /\.html$/,
 45 |       loader: "raw-loader" // loaders: ['raw-loader']，這個方式也是可以被接受的。
 46 |     }]
 47 |   },
 48 |   devServer: {
 49 |     contentBase: './dist',
 50 |     hot: true
 51 |   }
 52 | }
 53 | ```
 54 | 
 55 | 這個時候當你執行 `webpack`，如果們 `require` 一個檔案它的附檔名是 `.html`，我們將使用 `raw-loader` loader，加入 HTML 到 bundle。
 56 | 
 57 | 現在我們目前空的 `index.js` 檔案內我們可以這麼做。
 58 | 
 59 | ```javascript
 60 | // index.js
 61 | require('./index.html')
 62 | ```
 63 | 
 64 | 如果你現在要檢查 hot reload 是否可以執行，但是你必須要知道我們只是 require `index.html` 到我們的 `index.js`，這麼做絕對與 hot reload 無關。我們不想要在 production 使用 hot reload，這就是為什麼我們要使用 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin)。
 65 | 
 66 | 這個 plugin 讓我們建立一個全域的常數到我們整個 bundle，我們可以命名任何常數，像是：`DONT_USE_IN_PRODUCTION: true`，但實際上，更普遍的做法會像是 `process.env.NODE_ENV: JSON.stringify('production')`。為什麼要 `JSON.stringify`？根據文件的解釋：
 67 | 
 68 | > 如果值是一個字串，它會被作為一個程式碼片段。
 69 | 
 70 | 現在我們已經了解了，我們可以加入這個 plugin 到我們的 production 設定檔：
 71 | 
 72 | ```javascript
 73 | // webpack.config.prod.js
 74 | var path = require('path')
 75 | var webpack = require('webpack')
 76 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 77 | 
 78 | module.exports = {
 79 |   devtool: 'source-map',
 80 |   entry: ['./src/index'],
 81 |   output: {
 82 |     path: path.join(__dirname, 'dist'),
 83 |     filename: 'bundle.js'
 84 |   },
 85 |   plugins: [
 86 |     new webpack.optimize.UglifyJsPlugin({
 87 |       compressor: {
 88 |         warnings: false,
 89 |       },
 90 |     }),
 91 |     new webpack.optimize.OccurrenceOrderPlugin(),
 92 |     new HtmlWebpackPlugin({
 93 |       template: './src/index.html'
 94 |     }),
 95 |     new webpack.DefinePlugin({
 96 |       'process.env.NODE_ENV': JSON.stringify('production')
 97 |     })
 98 |   ],
 99 |   module: {
100 |     loaders: [{
101 |       test: /\.css$/,
102 |       loaders: ['style', 'css']
103 |     }]
104 |   }
105 | }
106 | ```
107 | 
108 | 並在我們的 `index.js` 加入一個條件判斷：
109 | 
110 | ```javascript
111 | if (process.env.NODE_ENV !== 'production') {
112 |   require('./index.html')
113 | }
114 | ```
115 | 
116 | 解決問題啦！在 production build 中，我們不需要 `index.html` 作為 dependency tree 的一部份，我們不需要 `index.html`，這也意味著我們不需要 `raw-loader`。
117 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "raw-loader": "^0.5.1",
16 |     "webpack": "^1.12.13",
17 |     "webpack-dev-server": "^1.14.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/src/index.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV !== 'production') {
2 |   require('./index.html')
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 | }
 4 | 
 5 | #color {
 6 |   width: 300px;
 7 |   height: 300px;
 8 |   margin: 0 auto;
 9 | }
10 | 
11 | button {
12 |   cursor: pointer;
13 |   display: inline-block;
14 |   height: 20px;
15 |   background-color: rgb(123, 109, 198);
16 |   color: rgb(255, 255, 255);
17 |   padding: 10px 5px;
18 |   border-radius: 4px;
19 |   border-bottom: 2px solid rgb(143, 132, 200);
20 | }
21 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }, {
27 |       test: /\.html$/,
28 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
29 |     }]
30 |   },
31 |   devServer: {
32 |     contentBase: './dist',
33 |     hot: true
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/zh-TW/part1/html-reload/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     }),
22 |     new webpack.DefinePlugin({
23 |       'process.env.NODE_ENV': JSON.stringify('production')
24 |     })
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb/base",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "comma-dangle": 0,
 6 |     "no-console": 0,
 7 |     "semi": [2, "never"],
 8 |     "func-names": 0,
 9 |     "space-before-function-paren": 0,
10 |     "no-multi-spaces": 0,
11 |     "babel/generator-star-spacing": 1,
12 |     "babel/new-cap": 1,
13 |     "babel/object-shorthand": 1,
14 |     "babel/arrow-parens": 1,
15 |     "babel/no-await-in-loop": 1
16 |   },
17 |   "plugins": [
18 |     "babel"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js",
 9 |     "lint": "eslint src"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "babel-core": "^6.4.5",
16 |     "babel-eslint": "^4.1.8",
17 |     "babel-loader": "^6.2.2",
18 |     "babel-preset-es2015": "^6.3.13",
19 |     "babel-preset-stage-2": "^6.3.13",
20 |     "css-loader": "^0.23.1",
21 |     "eslint": "^1.10.3",
22 |     "eslint-config-airbnb": "^5.0.0",
23 |     "eslint-plugin-babel": "^3.1.0",
24 |     "html-webpack-plugin": "^2.8.1",
25 |     "style-loader": "^0.13.0",
26 |     "webpack": "^1.12.13",
27 |     "webpack-dev-server": "^1.14.1"
28 |   },
29 |   "dependencies": {
30 |     "pleasejs": "^0.4.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/src/index.js:
--------------------------------------------------------------------------------
 1 | import Please from 'pleasejs' // use es6 module import
 2 | require('./styles.css') // The page is now styled
 3 | 
 4 | // Accept hot module reloading during development
 5 | if (process.env.NODE_ENV !== 'production') {
 6 |   if (module.hot) {
 7 |     module.hot.accept()
 8 |   }
 9 | }
10 | 
11 | const div = document.getElementById('color')
12 | const button = document.getElementById('button')
13 | const changeColor = () => div.style.backgroundColor = Please.make_color()
14 | 
15 | button.addEventListener('click', changeColor)
16 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'cheap-eval-source-map',
 9 |   entry: [
10 |     'webpack-dev-server/client?http://localhost:8080',
11 |     'webpack/hot/dev-server',
12 |     './src/index'
13 |   ],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.HotModuleReplacementPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     })
23 |   ],
24 |   module: {
25 |     loaders: [{
26 |       test: /\.css$/,
27 |       loaders: ['style', 'css']
28 |     }, {
29 |       test: /\.js$/,
30 |       loaders: ['babel'],
31 |       include: path.join(__dirname, 'src')
32 |     }]
33 |   },
34 |   devServer: {
35 |     contentBase: './dist',
36 |     hot: true
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/zh-TW/part2/example1/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'source-map',
 9 |   entry: ['./src/index'],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js'
13 |   },
14 |   plugins: [
15 |     new webpack.optimize.UglifyJsPlugin({
16 |       compressor: {
17 |         warnings: false,
18 |       },
19 |     }),
20 |     new webpack.optimize.OccurrenceOrderPlugin(),
21 |     new HtmlWebpackPlugin({
22 |       template: './src/index.html'
23 |     }),
24 |     new webpack.DefinePlugin({
25 |       'process.env.NODE_ENV': JSON.stringify('production')
26 |     })
27 |   ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.css$/,
31 |       loaders: ['style', 'css']
32 |     }, {
33 |       test: /\.js$/,
34 |       loaders: ['babel'],
35 |       include: path.join(__dirname, 'src')
36 |     }]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/zh-cn/README.md:
--------------------------------------------------------------------------------
1 | # Webpack 初学者教学课程 :school:
2 | 
3 | Webpack 刚开始对我来说是很困难的，所以我想要建立一个对初学者友善，而且对 webpack 有着非常全面的介绍教学。
4 | 
5 | - [Part 1](./part1) - Webpack 基础和配置。
6 | - [Part 2](./part2) - Babel、Lint、以及环境变量。
7 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/README.md:
--------------------------------------------------------------------------------
 1 | # 番外 - 提取你的 CSS
 2 | 
 3 | 好了，你现在已经完成了，但是在 production 你不想要将你的 CSS 文件放入到你的 JavaScript。为了这个目的，我们将会使用 [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
 4 | 
 5 |     npm install --save-dev extract-text-webpack-plugin
 6 | 
 7 | 我们需要改变我们的 webpack prod 配置文件：
 8 | 
 9 | ```javascript
10 | var path = require('path')
11 | var webpack = require('webpack')
12 | var HtmlWebpackPlugin = require('html-webpack-plugin')
13 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
14 | 
15 | module.exports = {
16 |   devtool: 'source-map',
17 |   entry: ['./src/index'],
18 |   output: {
19 |     path: path.join(__dirname, 'dist'),
20 |     filename: 'bundle.js'
21 |   },
22 |   plugins: [
23 |     new webpack.optimize.UglifyJsPlugin({
24 |       compressor: {
25 |         warnings: false,
26 |       },
27 |     }),
28 |     new webpack.optimize.OccurenceOrderPlugin(),
29 |     new HtmlWebpackPlugin({
30 |       template: './src/index.html'
31 |     }),
32 |     new ExtractTextPlugin("styles.css")
33 |   ],
34 |   module: {
35 |     loaders: [{
36 |       test: /\.css$/,
37 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
38 |     }]
39 |   }
40 | }
41 | ```
42 | 
43 | 这些修改来自[官方 repository](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎么运作的，可以到官方相关文件做更深入的了解。
44 | 
45 | > 它在进入点将每个 require("style.css") chunk 成独立的 css 输出文件。所以你的样式不会在 JavaScript 内，但是它会被分离到一个 css bundle 文件（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 时，stylesheet bundle 会被平行的载入，可以加快载入的速度。
46 | 
47 | 如果现在你执行 `npm run build`，你的 CSS 会被独立成一个文件，有趣的是，它已经被引入到你的 `index.html` 了。
48 | 
49 | ```html
50 | <html>
51 | <head>
52 |   <title>Webpack Tutorial</title>
53 | <link href="styles.css" rel="stylesheet"> <------ MAGICALLY ADDED
54 | </head>
55 | <body>
56 |   <h1>Very Website</h1>
57 |   <section id="color"></section>
58 |   <button id="button">Such Button</button>
59 | <script src="bundle.js"></script></body>
60 | </html>
61 | ```
62 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-extract",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "extract-text-webpack-plugin": "^1.0.1",
16 |     "html-webpack-plugin": "^2.8.1",
17 |     "style-loader": "^0.13.0",
18 |     "webpack": "^1.12.13",
19 |     "webpack-dev-server": "^1.14.1"
20 |   },
21 |   "dependencies": {
22 |     "pleasejs": "^0.4.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/src/changeColor.js:
--------------------------------------------------------------------------------
 1 | var Please = require('pleasejs')
 2 | var div = document.getElementById('color')
 3 | var button = document.getElementById('button')
 4 | 
 5 | function changeColor() {
 6 |   div.style.backgroundColor = Please.make_color()
 7 |   console.log('pls do work')
 8 | }
 9 | 
10 | button.addEventListener('click', changeColor)
11 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./changeColor.js')
3 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-cn/part1/css-extract/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 | 
 6 | module.exports = {
 7 |   devtool: 'source-map',
 8 |   entry: ['./src/index'],
 9 |   output: {
10 |     path: path.join(__dirname, 'dist'),
11 |     filename: 'bundle.js'
12 |   },
13 |   plugins: [
14 |     new webpack.optimize.UglifyJsPlugin({
15 |       compressor: {
16 |         warnings: false,
17 |       },
18 |     }),
19 |     new webpack.optimize.OccurrenceOrderPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     }),
23 |     new ExtractTextPlugin("styles.css")
24 |   ],
25 |   module: {
26 |     loaders: [{
27 |       test: /\.css$/,
28 |       loader: ExtractTextPlugin.extract("style-loader", "css-loader")
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/README.md:
--------------------------------------------------------------------------------
 1 | # 范例一 - Bundle 和 Loader
 2 | 
 3 | ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 4 | 
 5 | Webpack 简称为模块的整合工具。如果你想要深入的话，可以拜访「modules」和「module bundling definitely」这两篇优秀的解释文章：
 6 | [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
 7 | 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
 8 | 我们要保持它的简单，webpack 运作的方式是通过指定一个单一文件作为你的进入点。
 9 | 这个文件会是 tree 的 root。然后你每次 `require` 一个文件从其他文件并把它加入到 tree。当你执行 `webpack`，所有的文件和 module 都会被 bundle 成一个文件。
10 | 
11 | 这里是一个简单的范例：
12 | 
13 | ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
14 | 
15 | 根据这样的情况，你可以有这样的目录：
16 | 
17 | ```
18 | MyDirectory
19 | |- index.js
20 | |- UIStuff.js
21 | |- APIStuff.js
22 | |- styles.css
23 | |- extraFile.js
24 | ```
25 | 
26 | 这些可能是你文件的内容：
27 | 
28 | ```javascript
29 | // index.js
30 | require('./styles.css')
31 | require('./UIStuff.js')
32 | require('./APIStuff.js')
33 | 
34 | // UIStuff.js
35 | var React = require('React')
36 | React.createClass({
37 |   // stuff
38 | })
39 | 
40 | // APIStuff.js
41 | var fetch = require('fetch') // fetch polyfill
42 | fetch('https://google.com')
43 | ```
44 | 
45 | ```css
46 | /* styles.css */
47 | body {
48 |   background-color: rgb(200, 56, 97);
49 | }
50 | ```
51 | 
52 | 当你执行 `webpack`，你会得到一个这个 tree 的 bundle 内容，虽然 `extraFile.js` 也是在相同的目录中，但它不是被 bundle 的一部份，因为它在 `index.js` 没有被 `require`。
53 | 
54 | `bundle.js` 看起来会像：
55 | 
56 | ```javascript
57 | // contents of styles.css
58 | // contents of UIStuff.js + React
59 | // contents of APIStuff.js + fetch
60 | ```
61 | 
62 | 被 bundle 的这些文件是你明确所 require 进来的文件。
63 | 
64 | ### Loaders
65 | 
66 | 你可能会注意到，我在上方的范例做了一些奇怪的事情。我在 JavaScript 文件中 `require` 一个 css 文件。
67 | 
68 | 关于 webpack 真的很酷，有趣的事情是，你可以 `require` 其他不只是 JavaScript 的文件。
69 | 
70 | 在 webpack 这些东西我们称为 loader。使用这些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 档。
71 | 
72 | 例如在上图我有：
73 | 
74 | ```javascript
75 | // index.js
76 | require('./styles.css')
77 | ```
78 | 
79 | 如果在我的 webpack 配置中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，这是可行的，还可以实际应用 CSS 到我的网页。
80 | 
81 | 你可以在 webpack 使用多个 loader，这里只是一个单一的例子。
82 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "fetch": "^1.0.0",
14 |     "react": "^0.14.7"
15 |   },
16 |   "devDependencies": {
17 |     "css-loader": "^0.23.1",
18 |     "style-loader": "^0.13.0",
19 |     "webpack": "^1.12.14"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/src/APIStuff.js:
--------------------------------------------------------------------------------
1 | var fetch = require('fetch') // fetch polyfill
2 | fetch('https://google.com')
3 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/src/UIStuff.js:
--------------------------------------------------------------------------------
1 | var React = require('React')
2 | React.createClass({
3 |   // stuff
4 | })
5 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/src/extraFile.js:
--------------------------------------------------------------------------------
1 | console.log('No one likes me')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/src/index.js:
--------------------------------------------------------------------------------
1 | require('./styles.css')
2 | require('./UIStuff.js')
3 | require('./APIStuff.js')
4 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: rgb(200, 56, 97);
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example1/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example2/README.md:
--------------------------------------------------------------------------------
 1 | # 范例二 - 一个简单的范例
 2 | 
 3 | 你的目录结构像是这样：
 4 | 
 5 | ```
 6 | MyDirectory
 7 | |- dist
 8 | |- src
 9 |    |- index.js
10 | |- webpack.config.js
11 | 
12 | ```
13 | 
14 | 然后这是一个非常简易的 webpack 配置：
15 | 
16 | ```javascript
17 | // webpack.config.js
18 | var path = require('path')
19 | 
20 | module.exports = {
21 |   entry: ['./src/index'], // .js after index is optional
22 |   output: {
23 |     path: path.join(__dirname, 'dist'),
24 |     filename: 'bundle.js'
25 |   }
26 | }
27 | ```
28 | 
29 | 我们一个一个复习这些属性：
30 | 
31 | * [entry](https://webpack.github.io/docs/configuration.html#entry) - 这是你的 bundle 的进入点，这是我们在讨论 [bundling](#bundling) 的部分。`entry` 是一个阵列，根据你的需求，webpack 允许可以有多个进入点，来产生多个 bundle 文件。
32 | 
33 | * [output](https://webpack.github.io/docs/configuration.html#output) - 由 webpack 规定的形式输出。
34 |   * [path](https://webpack.github.io/docs/configuration.html#output-path) - bundle 文件位置。
35 |   * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 文件名称。
36 | 
37 | 当你执行 `webpack`，会在你的 dist 资料夹建立一个叫做 `bundle.js` 的文件。
38 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example2",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT"
12 | }
13 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example2/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example2/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: ['./src/index'], // .js after index is optional
 5 |   output: {
 6 |     path: path.join(__dirname, 'dist'),
 7 |     filename: 'bundle.js'
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example3/README.md:
--------------------------------------------------------------------------------
 1 | # 范例三 - 介绍 Plugins
 2 | 
 3 | 想像一下，你使用 webpack 将你的文件 bundle 在一起，然后你发现到 bundle 后的结果是 900KB。这里有个问题，但是你可以通过 minify 你的 bundle 文件来做改善。如果需要做到这一点，你需要使用一个我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 4 | 
 5 | 此外，你需要在本机安装 webpack 才能实际的去使用这个 plugin。
 6 | 
 7 |     npm install --save-dev webpack
 8 | 
 9 | 现在你可以 require webpack 并 minify 你的代码。
10 | 
11 | ```javascript
12 | // webpack.config.js
13 | var path = require('path')
14 | var webpack = require('webpack')
15 | 
16 | module.exports = {
17 |   entry: ['./src/index'],
18 |   output: {
19 |     path: path.join(__dirname, 'dist'),
20 |     filename: 'bundle.js'
21 |   },
22 | 
23 |   plugins: [
24 |     new webpack.optimize.UglifyJsPlugin({
25 |       compressor: {
26 |         warnings: false,
27 |       },
28 |     })
29 |   ]
30 | }
31 | ```
32 | 我们一个一个复习这些属性：
33 | 
34 | * plugins - 一个可以储存你的 plugin 的阵列。
35 |   * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的代码，并显示警告讯息。
36 | 
37 | 这个时候，当我们执行 `webpack`，`UglifyJsPlugin` 通过像是移除所有空白的处理，可以将你的文件减少至 200KB。
38 | 
39 | 你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
40 | 
41 | > 通过发生次数分配 module 和 chunk 的 id。一些常用的 Id 取得较低（短）的 id。这使得 id 可以预测，减少文件的大小和建议。
42 | 
43 | 老实说，我不太确定底层的机制是如何工作的，但在目前包含 [webpack2 beta 的预设情况下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我将它包含在内。
44 | 
45 | ```javascript
46 | // webpack.config.js
47 | var path = require('path')
48 | var webpack = require('webpack')
49 | 
50 | module.exports = {
51 |   entry: ['./src/index'],
52 |   output: {
53 |     path: path.join(__dirname, 'dist'),
54 |     filename: 'bundle.js'
55 |   },
56 |   plugins: [
57 |     new webpack.optimize.UglifyJsPlugin({
58 |       compressor: {
59 |         warnings: false,
60 |       },
61 |     }),
62 |     new webpack.optimize.OccurenceOrderPlugin()
63 |   ]
64 | }
65 | ```
66 | 
67 | 所以现在我们写了一个配置让我们可以 minify 和 bundle 我们的 JavaScript。这个 bundle 文件可以被复制并贴到其他的专桉目录中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎关于 webpack 基本的使用，你可以直接跳到[结论](#conclusion)。
68 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example3",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example3/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example3/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example4/README.md:
--------------------------------------------------------------------------------
 1 | 在稍早前面的教学中我提到了 [loaders](#loaders)。这些代码来帮助我们 require 非 JavaScript 的文件。在这种情况下，我们将需要 `style-loader` 和 `css-loader`。首先我们需要安装这些 loader：
 2 | 
 3 |     npm install --save-dev style-loader css-loader
 4 | 
 5 | 现在安装完后，我们可以调整我们的 webpack 配置来引入 `css-loader`：
 6 | 
 7 | ```javascript
 8 | // webpack.config.js
 9 | var path = require('path')
10 | var webpack = require('webpack')
11 | 
12 | module.exports = {
13 |   entry: ['./src/index'],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.optimize.UglifyJsPlugin({
20 |       compressor: {
21 |         warnings: false,
22 |       },
23 |     }),
24 |     new webpack.optimize.OccurenceOrderPlugin()
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | ```
34 | 
35 | 我们一个一个复习这些属性：
36 | 
37 | * [module](http://webpack.github.io/docs/configuration.html#module) - 配置你的文件选项。
38 |   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - 我们为应用程序所指定的一个 loader 阵列。
39 |     * test - 一个正规表达式来匹配 loader 的文件。
40 |     * loaders - loader 用于这些匹配 test （正规表达式）的文件。
41 | 
42 | 这个时候你执行 `webpack`，如果你 `require` 的文件结尾是 `.css`，然会我们会使用 `style` 和 `css` loader，将 CSS 加入到 bundle。
43 | 
44 | 如果我们没有 loaders，我们会得到像是这样的错误：
45 | 
46 | ```
47 | ERROR in ./test.css
48 | Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
49 | Line 1: Unexpected token {
50 | You may need an appropriate loader to handle this file type.
51 | ```
52 | 
53 | **可选项目**
54 | 
55 | 如果你想要使用 SCSS 而不是 CSS 你需要执行：
56 | 
57 |     npm install --save-dev sass-loader node-sass webpack
58 | 
59 | 然后你的 loader 必须修改成：
60 | 
61 | ```javascript
62 | {
63 |   test: /\.scss$/,
64 |   loaders: ["style", "css", "sass"]
65 | }
66 | ```
67 | 
68 | 处理 LESS 也类似于这个方式。
69 | 
70 | 要知道这些需要被指定的 loader 是有*顺序*的，这是一个很重要部分。在上面的范例，`sass` loader 是第一个应用在你的 `.scss` 文件，然后是 `css` loader，最后是 `style` loader。你可以看到，这些 loader 的应用模式是由右到左。
71 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example4",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "webpack": "^1.12.13"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example4/src/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/zh-cn/part1/example4/src/index.html


--------------------------------------------------------------------------------
/zh-cn/part1/example4/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example4/src/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AriaFallah/WebpackTutorial/ada78b7f505da40e3a6985f272047cebca9cf40d/zh-cn/part1/example4/src/styles.css


--------------------------------------------------------------------------------
/zh-cn/part1/example4/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index'], // .js after index is optional
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'bundle.js'
 9 |   },
10 |   plugins: [
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false,
14 |       },
15 |     }),
16 |     new webpack.optimize.OccurrenceOrderPlugin()
17 |   ],
18 |   module: {
19 |     loaders: [{
20 |       test: /\.css$/,
21 |       loaders: ['style', 'css']
22 |     }]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/README.md:
--------------------------------------------------------------------------------
  1 | # 范例五 - 加入更多的 Plugin
  2 | 
  3 | 现在我们的网站有一些基础了，但我们还需要实际的网站样式。
  4 | 
  5 | 我们通过 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 来做，它让我们可以产生一个 HTML 页面使用现有的。我们将使用一个目前现有的 `index.html`。
  6 | 
  7 | 首先我们需要安装 plugin：
  8 | 
  9 |     npm install --save-dev html-webpack-plugin@2
 10 | 
 11 | 然后在我们的 webpack 配置加入：
 12 | 
 13 | ```javascript
 14 | // webpack.config.js
 15 | var path = require('path')
 16 | var webpack = require('webpack')
 17 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 18 | 
 19 | module.exports = {
 20 |   entry: ['./src/index'],
 21 |   output: {
 22 |     path: path.join(__dirname, 'dist'),
 23 |     filename: 'bundle.js'
 24 |   },
 25 |   plugins: [
 26 |     new webpack.optimize.UglifyJsPlugin({
 27 |       compressor: {
 28 |         warnings: false,
 29 |       },
 30 |     }),
 31 |     new webpack.optimize.OccurenceOrderPlugin(),
 32 |     new HtmlWebpackPlugin({
 33 |       template: './src/index.html'
 34 |     })
 35 |   ],
 36 |   module: {
 37 |     loaders: [{
 38 |       test: /\.css$/,
 39 |       loaders: ['style', 'css']
 40 |     }]
 41 |   }
 42 | }
 43 | ```
 44 | 
 45 | 这个时候当你执行 `webpack`，因为我们指定一个 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它会产生一个文件叫做 `index.html` 在我们的 `dist` 资料夹，而网页的内容是 `./src/index.html`。
 46 | 
 47 | 如果 `index.html` 作为 template 是空的也没用，现在是个好时机我们可以填入一些元素进去。
 48 | 
 49 | ```html
 50 | <html>
 51 | <head>
 52 |   <title>Webpack Tutorial</title>
 53 | </head>
 54 | <body>
 55 |   <h1>Very Website</h1>
 56 |   <section id="color"></section>
 57 |   <button id="button">Such Button</button>
 58 | 
 59 | </body>
 60 | </html>
 61 | ```
 62 | 
 63 | 注意到我们没有放入一个 `bundle.js` 的 `<script>` 标籤到我们的 HTML。实际上 plugin 会自动的帮你处理。如果你放入 script，到头来你会载入两次相同的代码。
 64 | 
 65 | 而让我们加入一些基本的样式在 `styles.css`：
 66 | 
 67 | ```css
 68 | h1 {
 69 |   color: rgb(114, 191, 190);
 70 |   text-align: center;
 71 | }
 72 | 
 73 | #color {
 74 |   width: 300px;
 75 |   height: 300px;
 76 |   margin: 0 auto;
 77 | }
 78 | 
 79 | button {
 80 |   cursor: pointer;
 81 |   display: block;
 82 |   width: 100px;
 83 |   outline: 0;
 84 |   border: 0;
 85 |   margin: 20px auto;
 86 | }
 87 | ```
 88 | 
 89 | #### 备注
 90 | 
 91 | 我觉得我应该提到 `html-webpack-plugin` 需要谨慎使用。对我来说，如果你真的只是简单的启用一个 SPA，webpack 应该只产生 HTML 文件。这里只需要一个 HTML 文件，我不会推荐它来产生 12 个 HTML 文件，当作一个学习经验。这意思不是说你不能使用 html 文件之类的，像是 angular 指令，只需要 HTML template 文件。在这个情况下你可以做类似像是：
 92 | 
 93 | ```javascript
 94 | // ...directive stuff
 95 | template: require('./templates/button.html') // 使用 raw loader
 96 | ```
 97 | 
 98 | 相反的，它意味着你不应该做这样的事情︰
 99 | 
100 | ```javascript
101 | new HtmlWebpackPlugin
102 |   template: './src/index.html'
103 | }),
104 | new HtmlWebpackPlugin({
105 |   template: './src/button.html'
106 | }),new HtmlWebpackPlugin({
107 |   template: './src/page2.html'
108 | })
109 | ```
110 | 
111 | 如果我这个部份我搞错了，请任何有这方面经验的人随时纠正我。
112 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example5",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "html-webpack-plugin": "^2.8.1",
14 |     "webpack": "^1.12.13"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('It works!')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example5/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   entry: ['./src/index'],
 7 |   output: {
 8 |     path: path.join(__dirname, 'dist'),
 9 |     filename: 'bundle.js'
10 |   },
11 |   plugins: [
12 |     new webpack.optimize.UglifyJsPlugin({
13 |       compressor: {
14 |         warnings: false,
15 |       },
16 |     }),
17 |     new webpack.optimize.OccurrenceOrderPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/README.md:
--------------------------------------------------------------------------------
  1 | # 范例六 - 开发服务器
  2 | 
  3 | 现在我们想要实际在浏览器看到我们的网站，需要一个 web 服务器来服务我们的代码。webpack 自带了方便的 `webpack-dev-server`，你需要在本机和全域安装。
  4 | 
  5 |     npm install -g webpack-dev-server
  6 |     npm install --save-dev webpack-dev-server
  7 | 
  8 | dev server 可以在浏览器看到你的网站外观也可以更快速的开发，是一个相当有用的资源。预设情况下你可以拜访 `http://localhost:8080`。不幸的是，像是 hot reload 的功能并不是内建的，还需要一些其他的配置。
  9 | 
 10 | 这是 webpack 配置一个很棒的分离点，意思是说你可以将他分成用于「development」以及「production」。因为我们必须在这个教学中保持简单的方式，所不会有很大的改变，但是会介绍 webpack 很棒的可设置性。我们称他们为 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 11 | 
 12 | ```javascript
 13 | // webpack.config.dev.js
 14 | var path = require('path')
 15 | var webpack = require('webpack')
 16 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 17 | 
 18 | module.exports = {
 19 |   devtool: 'cheap-eval-source-map',
 20 |   entry: [
 21 |     'webpack-dev-server/client?http://localhost:8080',
 22 |     'webpack/hot/dev-server',
 23 |     './src/index'
 24 |   ],
 25 |   output: {
 26 |     path: path.join(__dirname, 'dist'),
 27 |     filename: 'bundle.js'
 28 |   },
 29 |   plugins: [
 30 |     new webpack.HotModuleReplacementPlugin(),
 31 |     new HtmlWebpackPlugin({
 32 |       template: './src/index.html'
 33 |     })
 34 |   ],
 35 |   module: {
 36 |     loaders: [{
 37 |       test: /\.css$/,
 38 |       loaders: ['style', 'css']
 39 |     }]
 40 |   },
 41 |   devServer: {
 42 |     contentBase: './dist',
 43 |     hot: true
 44 |   }
 45 | }
 46 | ```
 47 | 
 48 | 
 49 | **修改**
 50 | 
 51 | 1. dev 配置省略了优化，当你不断的 rebuild 时，他们是不必要的。所以不需要 `webpack.optimize` plugins。
 52 | 
 53 | 2. dev 配置需要对 dev server 做必要的配置，你可以到[这里](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 54 | 
 55 | 总结：
 56 | 
 57 | * entry: 两个新的进入点将服务器连结到浏览器，方便 HMR。
 58 | * devServer
 59 |   * contentBase: 服务的文件来自哪裡。
 60 |   * hot: 启用 HMR。
 61 | ---
 62 | 
 63 | prod 配置不需要改变太多：
 64 | 
 65 | ```javascript
 66 | // webpack.config.prod.js
 67 | var path = require('path')
 68 | var webpack = require('webpack')
 69 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 70 | 
 71 | module.exports = {
 72 |   devtool: 'source-map',
 73 |   entry: ['./src/index'],
 74 |   output: {
 75 |     path: path.join(__dirname, 'dist'),
 76 |     filename: 'bundle.js'
 77 |   },
 78 |   plugins: [
 79 |     new webpack.optimize.UglifyJsPlugin({
 80 |       compressor: {
 81 |         warnings: false,
 82 |       },
 83 |     }),
 84 |     new webpack.optimize.OccurenceOrderPlugin(),
 85 |     new HtmlWebpackPlugin({
 86 |       template: './src/index.html'
 87 |     })
 88 |   ],
 89 |   module: {
 90 |     loaders: [{
 91 |       test: /\.css$/,
 92 |       loaders: ['style', 'css']
 93 |     }]
 94 |   }
 95 | }
 96 | ```
 97 | 
 98 | 我也加入一个全新的属性在 dev 和 prod 的配置：
 99 | 
100 | * [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 这是协助 debug 的工具。基本上，当你得到一个错误，它会帮助你找到哪裡发生了错误，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之间的差异从文件说明有点难解释。我可以肯定的是，`source-map` 是用于 `production`，`cheap-eval-source-map` 是用于 `development`。
101 | 
102 | 如果要执行 dev server，我们可以执行：
103 | 
104 |     webpack-dev-server --config webpack.config.dev.js
105 | 
106 | 如果我们要 build production 的代码，我们可以执
107 | 
108 |     webpack --config webpack.config.prod.js
109 | 
110 | 
111 | 如果想要让这些指令使用的更容易，我们可以到 `package.json` 来配置简单的 script。
112 | 
113 | 我们加入 `scripts` 属性到配置：
114 | 
115 | ```javascript
116 | // package.json
117 | {
118 |   //...
119 |   "scripts": {
120 |     "build": "webpack --config webpack.config.prod.js",
121 |     "dev"  : "webpack-dev-server --config webpack.config.dev.js"
122 |   }
123 |   //...
124 | }
125 | ```
126 | 
127 | 我们可以执行这些指令：
128 | 
129 | ```
130 | npm run build
131 | npm run dev
132 | ```
133 | 
134 | 你现在可以通过 `npm run dev`，并导到 `http://localhost:8080` 看到你的网站。
135 | 
136 | **备注：** 当我正在测试这个部份时，我了解到，当我修改 `index.html` 文件时，服务器不能 hot reload。解决这个问题的方法在 [html-reload](./html-reload)。这里涵盖了一些 webpack 配置选项的有用信息，我推荐你可以看一下，但是我把它分开了，因为我觉得会因为这个不太重要的原因，这会延长这个教学课程。
137 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "webpack": "^1.12.13",
16 |     "webpack-dev-server": "^1.14.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 |   
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/src/index.js:
--------------------------------------------------------------------------------
1 | console.log('hello there my friends')
2 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example6/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/README.md:
--------------------------------------------------------------------------------
 1 | # 范例七 - 开始撰写程序
 2 | 
 3 | 大多数的人会慌乱的原因似乎是因为：webpack 事实上需要通过这些取得的进入点来撰写 JavaScript；然而我们现在已经到达了这个教学课程最高潮的部分。
 4 | 
 5 | 如果你还没准备好：执行 `npm run dev`，以及导到 `http://localhost:8080`。配置 dev server 是不是可以 hot reload。在你每次储存你专桉所编辑的任何一个文件部份时，浏览器将会重新载入来显示你的修改。
 6 | 
 7 | 我们也需要一个 npm package，为了来示范如何在前端使用它们。
 8 | 
 9 |     npm install --save pleasejs
10 | 
11 | PleaseJS 是一个随机色彩的产生器，其中我们需要在按钮中加入 hook 来改变我们的 div 颜色。
12 | 
13 | ```javascript
14 | // index.js
15 | 
16 | // 接受 hot module reloading
17 | if (module.hot) {
18 |   module.hot.accept()
19 | }
20 | 
21 | require('./styles.css') // 网页现在有了样式
22 | var Please = require('pleasejs')
23 | var div = document.getElementById('color')
24 | var button = document.getElementById('button')
25 | 
26 | function changeColor() {
27 |   div.style.backgroundColor = Please.make_color()
28 | }
29 | 
30 | button.addEventListener('click', changeColor)
31 | ```
32 | 
33 | 有趣的是，[为了让 Hot Module Replacement 可以执行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的代码：
34 | 
35 | ```javascript
36 | if (module.hot) {
37 |   module.hot.accept()
38 | }
39 | ```
40 | 
41 | 在一个 module 或是它的父 module。
42 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example7",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.23.1",
15 |     "html-webpack-plugin": "^2.8.1",
16 |     "style-loader": "^0.13.0",
17 |     "webpack": "^1.12.13",
18 |     "webpack-dev-server": "^1.14.1"
19 |   },
20 |   "dependencies": {
21 |     "pleasejs": "^0.4.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/src/index.js:
--------------------------------------------------------------------------------
 1 | // Accept hot module reloading
 2 | if (module.hot) {
 3 |   module.hot.accept()
 4 | }
 5 | 
 6 | require('./styles.css') // The page is now styled
 7 | var Please = require('pleasejs')
 8 | var div = document.getElementById('color')
 9 | var button = document.getElementById('button')
10 | 
11 | function changeColor() {
12 |   div.style.backgroundColor = Please.make_color()
13 |   console.log('HMR works no')
14 | }
15 | 
16 | button.addEventListener('click', changeColor)
17 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }]
27 |   },
28 |   devServer: {
29 |     contentBase: './dist',
30 |     hot: true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-cn/part1/example7/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     })
22 |   ],
23 |   module: {
24 |     loaders: [{
25 |       test: /\.css$/,
26 |       loaders: ['style', 'css']
27 |     }]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/README.md:
--------------------------------------------------------------------------------
  1 | # 番外 - 让你的 HTML 可以 hot reload
  2 | 
  3 | 所以，当我测试的时候我才知道 `index.html` 不会被 hot reload！在之后搜寻的结果，我最后找到了[有帮助的答案](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin)，
  4 | 这需要一个 [loader](https://github.com/webpack/raw-loader) 来让我们 hacky，也需要另一个 [plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 来防止这个 hacky 到 production。
  5 | 
  6 | 基本上要让 webpack 可以 hot reload 我们的 HTML，我们需要 require 我们其中文件之一，让它变成我们 dependency tree 的一部份。为了做到这一点，我们将会使用 `raw-loader` loader，它可以 pull 我们的 HTML 变成字串到我们的 JavaScript，但是另外我们真正需要做的是：加入 HTML 到 dependency tree。
  7 | 
  8 | 所以让我们加入这个 loader 到我们的 dev 配置：
  9 | 
 10 | 首先我们需要安装：
 11 | 
 12 |     npm install --save-dev raw-loader
 13 | 
 14 | 然我们加入：
 15 | 
 16 | ```javascript
 17 | // webpack.config.dev.js
 18 | var path = require('path')
 19 | var webpack = require('webpack')
 20 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 21 | 
 22 | module.exports = {
 23 |   devtool: 'cheap-eval-source-map',
 24 |   entry: [
 25 |     'webpack-dev-server/client?http://localhost:8080',
 26 |     'webpack/hot/dev-server',
 27 |     './src/index'
 28 |   ],
 29 |   output: {
 30 |     path: path.join(__dirname, 'dist'),
 31 |     filename: 'bundle.js'
 32 |   },
 33 |   plugins: [
 34 |     new webpack.HotModuleReplacementPlugin(),
 35 |     new HtmlWebpackPlugin({
 36 |       template: './src/index.html'
 37 |     })
 38 |   ],
 39 |   module: {
 40 |     loaders: [{
 41 |       test: /\.css$/,
 42 |       loaders: ['style', 'css']
 43 |     }, {
 44 |       test: /\.html$/,
 45 |       loader: "raw-loader" // loaders: ['raw-loader']，这个方式也是可以被接受的。
 46 |     }]
 47 |   },
 48 |   devServer: {
 49 |     contentBase: './dist',
 50 |     hot: true
 51 |   }
 52 | }
 53 | ```
 54 | 
 55 | 这个时候当你执行 `webpack`，如果们 `require` 一个文件它的附档名是 `.html`，我们将使用 `raw-loader` loader，加入 HTML 到 bundle。
 56 | 
 57 | 现在我们目前空的 `index.js` 文件内我们可以这么做。
 58 | 
 59 | ```javascript
 60 | // index.js
 61 | require('./index.html')
 62 | ```
 63 | 
 64 | 如果你现在要检查 hot reload 是否可以执行，但是你必须要知道我们只是 require `index.html` 到我们的 `index.js`，这么做绝对与 hot reload 无关。我们不想要在 production 使用 hot reload，这就是为什么我们要使用 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin)。
 65 | 
 66 | 这个 plugin 让我们建立一个全域的常数到我们整个 bundle，我们可以命名任何常数，像是：`DONT_USE_IN_PRODUCTION: true`，但实际上，更普遍的做法会像是 `process.env.NODE_ENV: JSON.stringify('production')`。为什么要 `JSON.stringify`？根据文件的解释：
 67 | 
 68 | > 如果值是一个字串，它会被作为一个代码片段。
 69 | 
 70 | 现在我们已经了解了，我们可以加入这个 plugin 到我们的 production 配置：
 71 | 
 72 | ```javascript
 73 | // webpack.config.prod.js
 74 | var path = require('path')
 75 | var webpack = require('webpack')
 76 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 77 | 
 78 | module.exports = {
 79 |   devtool: 'source-map',
 80 |   entry: ['./src/index'],
 81 |   output: {
 82 |     path: path.join(__dirname, 'dist'),
 83 |     filename: 'bundle.js'
 84 |   },
 85 |   plugins: [
 86 |     new webpack.optimize.UglifyJsPlugin({
 87 |       compressor: {
 88 |         warnings: false,
 89 |       },
 90 |     }),
 91 |     new webpack.optimize.OccurrenceOrderPlugin(),
 92 |     new HtmlWebpackPlugin({
 93 |       template: './src/index.html'
 94 |     }),
 95 |     new webpack.DefinePlugin({
 96 |       'process.env.NODE_ENV': JSON.stringify('production')
 97 |     })
 98 |   ],
 99 |   module: {
100 |     loaders: [{
101 |       test: /\.css$/,
102 |       loaders: ['style', 'css']
103 |     }]
104 |   }
105 | }
106 | ```
107 | 
108 | 并在我们的 `index.js` 加入一个条件判断：
109 | 
110 | ```javascript
111 | if (process.env.NODE_ENV !== 'production') {
112 |   require('./index.html')
113 | }
114 | ```
115 | 
116 | 解决问题啦！在 production build 中，我们不需要 `index.html` 作为 dependency tree 的一部份，我们不需要 `index.html`，这也意味着我们不需要 `raw-loader`。
117 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example6",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "^2.8.1",
15 |     "raw-loader": "^0.5.1",
16 |     "webpack": "^1.12.13",
17 |     "webpack-dev-server": "^1.14.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/src/index.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV !== 'production') {
2 |   require('./index.html')
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 | }
 4 | 
 5 | #color {
 6 |   width: 300px;
 7 |   height: 300px;
 8 |   margin: 0 auto;
 9 | }
10 | 
11 | button {
12 |   cursor: pointer;
13 |   display: inline-block;
14 |   height: 20px;
15 |   background-color: rgb(123, 109, 198);
16 |   color: rgb(255, 255, 255);
17 |   padding: 10px 5px;
18 |   border-radius: 4px;
19 |   border-bottom: 2px solid rgb(143, 132, 200);
20 | }
21 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'cheap-eval-source-map',
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:8080',
 9 |     'webpack/hot/dev-server',
10 |     './src/index'
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new HtmlWebpackPlugin({
19 |       template: './src/index.html'
20 |     })
21 |   ],
22 |   module: {
23 |     loaders: [{
24 |       test: /\.css$/,
25 |       loaders: ['style', 'css']
26 |     }, {
27 |       test: /\.html$/,
28 |       loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
29 |     }]
30 |   },
31 |   devServer: {
32 |     contentBase: './dist',
33 |     hot: true
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/zh-cn/part1/html-reload/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: ['./src/index'],
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: 'bundle.js'
11 |   },
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({
14 |       compressor: {
15 |         warnings: false,
16 |       },
17 |     }),
18 |     new webpack.optimize.OccurrenceOrderPlugin(),
19 |     new HtmlWebpackPlugin({
20 |       template: './src/index.html'
21 |     }),
22 |     new webpack.DefinePlugin({
23 |       'process.env.NODE_ENV': JSON.stringify('production')
24 |     })
25 |   ],
26 |   module: {
27 |     loaders: [{
28 |       test: /\.css$/,
29 |       loaders: ['style', 'css']
30 |     }]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }
4 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb/base",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "comma-dangle": 0,
 6 |     "no-console": 0,
 7 |     "semi": [2, "never"],
 8 |     "func-names": 0,
 9 |     "space-before-function-paren": 0,
10 |     "no-multi-spaces": 0,
11 |     "babel/generator-star-spacing": 1,
12 |     "babel/new-cap": 1,
13 |     "babel/object-shorthand": 1,
14 |     "babel/arrow-parens": 1,
15 |     "babel/no-await-in-loop": 1
16 |   },
17 |   "plugins": [
18 |     "babel"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example1",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack --config webpack.config.prod.js",
 8 |     "dev": "webpack-dev-server --config webpack.config.dev.js",
 9 |     "lint": "eslint src"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "babel-core": "^6.4.5",
16 |     "babel-eslint": "^4.1.8",
17 |     "babel-loader": "^6.2.2",
18 |     "babel-preset-es2015": "^6.3.13",
19 |     "babel-preset-stage-2": "^6.3.13",
20 |     "css-loader": "^0.23.1",
21 |     "eslint": "^1.10.3",
22 |     "eslint-config-airbnb": "^5.0.0",
23 |     "eslint-plugin-babel": "^3.1.0",
24 |     "html-webpack-plugin": "^2.8.1",
25 |     "style-loader": "^0.13.0",
26 |     "webpack": "^1.12.13",
27 |     "webpack-dev-server": "^1.14.1"
28 |   },
29 |   "dependencies": {
30 |     "pleasejs": "^0.4.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>Webpack Tutorial</title>
 4 | </head>
 5 | <body>
 6 |   <h1>Very Website</h1>
 7 |   <section id="color"></section>
 8 |   <button id="button">Such Button</button>  
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/src/index.js:
--------------------------------------------------------------------------------
 1 | import Please from 'pleasejs' // use es6 module import
 2 | require('./styles.css') // The page is now styled
 3 | 
 4 | // Accept hot module reloading during development
 5 | if (process.env.NODE_ENV !== 'production') {
 6 |   if (module.hot) {
 7 |     module.hot.accept()
 8 |   }
 9 | }
10 | 
11 | const div = document.getElementById('color')
12 | const button = document.getElementById('button')
13 | const changeColor = () => div.style.backgroundColor = Please.make_color()
14 | 
15 | button.addEventListener('click', changeColor)
16 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/src/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: rgb(114, 191, 190);
 3 |   text-align: center;
 4 | }
 5 | 
 6 | #color {
 7 |   width: 300px;
 8 |   height: 300px;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | button {
13 |   cursor: pointer;
14 |   display: block;
15 |   width: 100px;
16 |   outline: 0;
17 |   border: 0;
18 |   margin: 20px auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'cheap-eval-source-map',
 9 |   entry: [
10 |     'webpack-dev-server/client?http://localhost:8080',
11 |     'webpack/hot/dev-server',
12 |     './src/index'
13 |   ],
14 |   output: {
15 |     path: path.join(__dirname, 'dist'),
16 |     filename: 'bundle.js'
17 |   },
18 |   plugins: [
19 |     new webpack.HotModuleReplacementPlugin(),
20 |     new HtmlWebpackPlugin({
21 |       template: './src/index.html'
22 |     })
23 |   ],
24 |   module: {
25 |     loaders: [{
26 |       test: /\.css$/,
27 |       loaders: ['style', 'css']
28 |     }, {
29 |       test: /\.js$/,
30 |       loaders: ['babel'],
31 |       include: path.join(__dirname, 'src')
32 |     }]
33 |   },
34 |   devServer: {
35 |     contentBase: './dist',
36 |     hot: true
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/zh-cn/part2/example1/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-var: 0 */
 2 | 
 3 | var path = require('path')
 4 | var webpack = require('webpack')
 5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   devtool: 'source-map',
 9 |   entry: ['./src/index'],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js'
13 |   },
14 |   plugins: [
15 |     new webpack.optimize.UglifyJsPlugin({
16 |       compressor: {
17 |         warnings: false,
18 |       },
19 |     }),
20 |     new webpack.optimize.OccurrenceOrderPlugin(),
21 |     new HtmlWebpackPlugin({
22 |       template: './src/index.html'
23 |     }),
24 |     new webpack.DefinePlugin({
25 |       'process.env.NODE_ENV': JSON.stringify('production')
26 |     })
27 |   ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.css$/,
31 |       loaders: ['style', 'css']
32 |     }, {
33 |       test: /\.js$/,
34 |       loaders: ['babel'],
35 |       include: path.join(__dirname, 'src')
36 |     }]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------