You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
And we make the necessary changes to our webpack prod config:
10
10
11
11
```javascript
12
12
var path =require('path')
@@ -42,11 +42,15 @@ module.exports = {
42
42
}
43
43
```
44
44
45
-
이러한 변화는 [official-repo](https://github.com/webpack/extract-text-webpack-plugin) 에서 유래했습니다. 어떻게 이것이 동작하는 지 알고 싶다면 한번 살펴보세요.
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.
46
48
47
-
> 엔트리 청크에서 모든 require("style.css")들은 분리된 css 아웃풋 파일로 이동합니다. 그러니 당신의 스타일들은 더 이상 자바스크립트 안에 들어가지않고 css 번들파일안에 들어가게 됩니다. 만약 당신의 전체적인 스타일 시트 볼륨이 크다면, 이게 더 빠를 겁니다. 왜냐하면 스타일시트번들은 자바스크립트 번들과 병렬로 불러와지기 때문입니다.
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`.
48
53
49
-
이제 당신이 `npm run build`를 하면 설정을 사용하여 CSS는 분리된 파일로 들어가게 되고, 흥미롭게도 이미 `inde.html`에 포함(include)될 것입니다.
만약 당신이 `webpack` 을 치면 당신은 이 계층구조가 가진 내용들의 번들을 받게 됩니다. 하지만 같은 폴더 내에 있어도 `required`되지 않은 `extraFile.js`은 번들링에 포함되지 않게 됩니다.
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:
58
56
59
-
`bundle.js`는 다음과 같을 것입니다 :
57
+
`bundle.js`will look like:
60
58
61
59
```javascript
62
60
// contents of styles.css
63
61
// contents of UIStuff.js + React
64
62
// contents of APIStuff.js + fetch
65
63
```
66
64
67
-
번들되는 것은 당신이 명시적으로 required 한 것들만 번들링됩니다.
65
+
The things that are bundled are only the things that you explicitly required across your files.
68
66
69
67
### Loaders
70
68
71
-
(로더) 당신은 아마 눈치 챘겠지만, 위의 예제에서 제가 뭔가 이상한 것을 했었습니다. 저는 자바스크립트 파일에 css파일을 `required` 했습니다.
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.
72
73
73
-
자바스크립트 이외의 것들을 `require` 할 수 있다는 것은 웹팩에서 꽤 좋으면서 흥미롭습니다.
74
-
웹팩에서는 로더라는 것이 존재하는 데, 이러한 로더들을 사용하여서 당신은 `.css`와`.png`, `.html`파일들 같은 것 무엇이든지 `require`할 수 있습니다.
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.
75
76
76
-
예로, 위의 다이어그램에서
77
+
For example in the diagram above I had
77
78
78
79
```javascript
79
80
// index.js
80
81
require('./styles.css')
81
82
```
82
83
83
-
만약 제가 웹팩설정에 [the style-loader](https://github.com/webpack/style-loader) 와 [the css-loader](https://github.com/webpack/css-loader)를 추가하는 것은 유효할 뿐만 아니라, 제 페이지에 실제로 적용될 것입니다.
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.
84
86
85
-
이것은 당신이 웹팩을 가지고서 할 수 있는 많은 로더들의 하나의 예일뿐입니다.
87
+
This is just a single example of the many loaders you can use with webpack.
*[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.
37
32
38
-
*[output](https://webpack.github.io/docs/configuration.html#output) - 웹팩에 의해 출력되는 형태를 나타냅니다.
Copy file name to clipboardExpand all lines: part1/example3/README.md
+20-15Lines changed: 20 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,15 @@
1
1
# Example 3 - Introducing Plugins
2
2
3
-
당신이 모든 파일들을 한꺼번에 번들링했다가 당신이 그것이 900KB라는 것을 깨달았다고 해봅시다. 이것은 번들을 최소화함으로써 개선될 수 있습니다. 제가 이전에 언급한 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)를 사용하여서 이러한 문제를 해결할 수 있습니다.
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
Moreover you will need to have webpack installed locally to actually be able to use the plugin.
6
9
7
10
npm install --save-dev webpack
8
11
9
-
당신은 이제 웹팩을 사용하여서 코드를 최소화 하세요
12
+
Now you can require webpack and minify your code.
10
13
11
14
```javascript
12
15
// webpack.config.js
@@ -29,22 +32,21 @@ module.exports = {
29
32
]
30
33
}
31
34
```
35
+
Going over the new properties one by one:
32
36
33
-
새로운 속성들을 하나하나 알아보도록 하겠습니다 :
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.
34
39
35
-
* plugins - 플러그인들을 적을 배열.
36
-
*[webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - 코드를 최소화하고 경고 메시지를 숨깁니다.
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.
37
42
38
-
여기서 당신이 `webpack`을 칠 때, 당신은 `UglifyJsPlugin`을 가지고서 공백을 제거함으로써 900KB를 200KB 까지 줄일 수 있습니다.
43
+
You can also add the [OrderOccurencePlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
39
44
40
-
당신은 또한 [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin) 을 추가할 수가 있습니다.
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.
41
46
42
-
> 모듈을 할당하고 발생 카운트 아이디들을 발생(?chunk)시킵니다. ID들은 종종 적은(짧은) id들을 얻는데 사용됩니다. 이것은 id가 예상가능하며 파일 전체 크기를 경감시켜 추천됩니다.
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.
43
48
44
-
솔직히 어떤 메커니즘이 하부에 있는 지 모르겠지만 현재(1버젼?)에서는 기본으로 들어가지 않기 때문에 [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7), 이것또한 추가해줬습니다 .
45
-
46
-
47
-
```JavaScript
49
+
```javascript
48
50
// webpack.config.js
49
51
var path =require('path')
50
52
var webpack =require('webpack')
@@ -61,9 +63,12 @@ module.exports = {
61
63
warnings:false,
62
64
},
63
65
}),
64
-
newwebpack.optimize.OccurrenceOrderPlugin()
66
+
newwebpack.optimize.OccurenceOrderPlugin()
65
67
]
66
68
}
67
69
```
68
70
69
-
우리는 설정파일을 써서 우리의 번들 자바스크립트 파일을 최소화하였습니다. 이 번들은 다른 프로젝트의 디렉터리로 복사될 수 있습니다. 그리고 그곳의 script태그로 던져질 수 있습니다. 만약 당신이 웹팩의 기초만을 *자바스크립트만* 사용하기를 원한다면 [결론](#conclusion)을 생략할 수 있습니다.
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
@@ -66,6 +68,6 @@ You may need an appropriate loader to handle this file type.
66
68
}
67
69
```
68
70
69
-
LESS도 비슷합니다.
71
+
The process is similar for LESS.
70
72
71
-
로더를 인식하는 점에서 중요한 점은 이러한 로더들이 적혀지는 *순서*입니다. 위의 예제에서 `sass`로더가 제일 처음 당신의 `.scss`파일들에 적용이 되고 그리고 `css`로더가 적용이 되며 마지막으로 `style`로더가 적용이 되게 됩니다. 당신이 볼 수 있듯이, 패턴이 적용되는 순서는 오른쪽에서 왼쪽입니다.
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.
0 commit comments