Skip to content

Commit 897c749

Browse files
chenxsanchenxsan
authored
docs(guides): update output-management (#4145)
1 parent ac0d7f0 commit 897c749

File tree

1 file changed

+102
-91
lines changed

1 file changed

+102
-91
lines changed

‎src/content/guides/output-management.md

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -47,74 +47,80 @@ And use that function in our `src/index.js` file:
4747
__src/index.js__
4848

4949
``` diff
50-
import _ from 'lodash';
51-
+ import printMe from './print.js';
52-
53-
function component() {
54-
const element = document.createElement('div');
55-
+ const btn = document.createElement('button');
56-
57-
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
58-
59-
+ btn.innerHTML = 'Click me and check the console!';
60-
+ btn.onclick = printMe;
50+
import _ from 'lodash';
51+
+import printMe from './print.js';
52+
53+
function component() {
54+
const element = document.createElement('div');
55+
+ const btn = document.createElement('button');
56+
57+
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
58+
59+
+ btn.innerHTML = 'Click me and check the console!';
60+
+ btn.onclick = printMe;
6161
+
62-
+ element.appendChild(btn);
63-
64-
return element;
65-
}
66-
67-
document.body.appendChild(component());
62+
+ element.appendChild(btn);
63+
+
64+
return element;
65+
}
66+
67+
document.body.appendChild(component());
6868
```
6969

7070
Let's also update our `dist/index.html` file, in preparation for webpack to split out entries:
7171

7272
__dist/index.html__
7373

7474
``` diff
75-
<!doctype html>
76-
<html>
77-
<head>
78-
- <title>Asset Management</title>
79-
+ <title>Output Management</title>
80-
+ <script src="./print.bundle.js"></script>
81-
</head>
82-
<body>
83-
- <script src="./bundle.js"></script>
84-
+ <script src="./app.bundle.js"></script>
85-
</body>
86-
</html>
75+
<!DOCTYPE html>
76+
<html>
77+
<head>
78+
<meta charset="utf-8" />
79+
- <title>Asset Management</title>
80+
+ <title>Output Management</title>
81+
+ <script src="./print.bundle.js"></script>
82+
</head>
83+
<body>
84+
- <script src="bundle.js"></script>
85+
+ <script src="./app.bundle.js"></script>
86+
</body>
87+
</html>
8788
```
8889

8990
Now adjust the config. We'll be adding our `src/print.js` as a new entry point (`print`) and we'll change the output as well, so that it will dynamically generate bundle names, based on the entry point names:
9091

9192
__webpack.config.js__
9293

9394
``` diff
94-
const path = require('path');
95-
96-
module.exports = {
97-
- entry: './src/index.js',
98-
+ entry: {
99-
+ app: './src/index.js',
100-
+ print: './src/print.js',
101-
+ },
102-
output: {
103-
- filename: 'bundle.js',
104-
+ filename: '[name].bundle.js',
105-
path: path.resolve(__dirname, 'dist'),
106-
},
107-
};
95+
const path = require('path');
96+
97+
module.exports = {
98+
- entry: './src/index.js',
99+
+ entry: {
100+
+ app: './src/index.js',
101+
+ print: './src/print.js',
102+
+ },
103+
output: {
104+
- filename: 'bundle.js',
105+
+ filename: '[name].bundle.js',
106+
path: path.resolve(__dirname, 'dist'),
107+
},
108+
};
108109
```
109110

110111
Let's run `npm run build` and see what this generates:
111112

112113
``` bash
113114
...
114-
Asset Size Chunks Chunk Names
115-
app.bundle.js 545 kB 0, 1 [emitted] [big] app
116-
print.bundle.js 2.74 kB 1 [emitted] print
117-
...
115+
[webpack-cli] Compilation finished
116+
asset app.bundle.js 69.5 KiB [emitted] [minimized] (name: app) 1 related asset
117+
asset print.bundle.js 316 bytes [emitted] [minimized] (name: print)
118+
runtime modules 1.36 KiB 7 modules
119+
cacheable modules 530 KiB
120+
./src/index.js 407 bytes [built] [code generated]
121+
./src/print.js 83 bytes [built] [code generated]
122+
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
123+
webpack 5.4.0 compiled successfully in 3410 ms
118124
```
119125

120126
We can see that webpack generates our `print.bundle.js` and `app.bundle.js` files, which we also specified in our `index.html` file. if you open `index.html` in your browser, you can see what happens when you click the button.
@@ -133,35 +139,40 @@ npm install --save-dev html-webpack-plugin
133139
__webpack.config.js__
134140

135141
``` diff
136-
const path = require('path');
137-
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
138-
139-
module.exports = {
140-
entry: {
141-
app: './src/index.js',
142-
print: './src/print.js',
143-
},
144-
+ plugins: [
145-
+ new HtmlWebpackPlugin({
146-
+ title: 'Output Management',
147-
+ }),
148-
+ ],
149-
output: {
150-
filename: '[name].bundle.js',
151-
path: path.resolve(__dirname, 'dist'),
152-
},
153-
};
142+
const path = require('path');
143+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
144+
145+
module.exports = {
146+
entry: {
147+
app: './src/index.js',
148+
print: './src/print.js',
149+
},
150+
+ plugins: [
151+
+ new HtmlWebpackPlugin({
152+
+ title: 'Output Management',
153+
+ }),
154+
+ ],
155+
output: {
156+
filename: '[name].bundle.js',
157+
path: path.resolve(__dirname, 'dist'),
158+
},
159+
};
154160
```
155161

156162
Before we do a build, you should know that the `HtmlWebpackPlugin` by default will generate its own `index.html` file, even though we already have one in the `dist/` folder. This means that it will replace our `index.html` file with a newly generated one. Let's see what happens when we do an `npm run build`:
157163

158164
``` bash
159165
...
160-
Asset Size Chunks Chunk Names
161-
print.bundle.js 544 kB 0 [emitted] [big] print
162-
app.bundle.js 2.81 kB 1 [emitted] app
163-
index.html 249 bytes [emitted]
164-
...
166+
[webpack-cli] Compilation finished
167+
asset app.bundle.js 69.5 KiB [compared for emit] [minimized] (name: app) 1 related asset
168+
asset print.bundle.js 316 bytes [compared for emit] [minimized] (name: print)
169+
asset index.html 251 bytes [emitted]
170+
runtime modules 1.36 KiB 7 modules
171+
cacheable modules 530 KiB
172+
./src/index.js 407 bytes [built] [code generated]
173+
./src/print.js 83 bytes [built] [code generated]
174+
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
175+
webpack 5.4.0 compiled successfully in 5761 ms
165176
```
166177

167178
If you open `index.html` in your code editor, you'll see that the `HtmlWebpackPlugin` has created an entirely new file for you and that all the bundles are automatically added.
@@ -183,26 +194,26 @@ npm install --save-dev clean-webpack-plugin
183194
__webpack.config.js__
184195

185196
``` diff
186-
const path = require('path');
187-
const HtmlWebpackPlugin = require('html-webpack-plugin');
188-
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
189-
190-
module.exports = {
191-
entry: {
192-
app: './src/index.js',
193-
print: './src/print.js',
194-
},
195-
plugins: [
196-
+ new CleanWebpackPlugin(),
197-
new HtmlWebpackPlugin({
198-
      title: 'Output Management',
199-
}),
200-
],
201-
output: {
202-
filename: '[name].bundle.js',
203-
path: path.resolve(__dirname, 'dist'),
204-
},
205-
};
197+
const path = require('path');
198+
const HtmlWebpackPlugin = require('html-webpack-plugin');
199+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
200+
201+
module.exports = {
202+
entry: {
203+
app: './src/index.js',
204+
print: './src/print.js',
205+
},
206+
plugins: [
207+
+ new CleanWebpackPlugin(),
208+
new HtmlWebpackPlugin({
209+
title: 'Output Management',
210+
}),
211+
],
212+
output: {
213+
filename: '[name].bundle.js',
214+
path: path.resolve(__dirname, 'dist'),
215+
},
216+
};
206217
```
207218

208219
Now run an `npm run build` and inspect the `/dist` folder. If everything went well you should now only see the files generated from the build and no more old files!
@@ -212,7 +223,7 @@ Now run an `npm run build` and inspect the `/dist` folder. If everything went we
212223

213224
You might be wondering how webpack and its plugins seem to "know" what files are being generated. The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's [`output`](/configuration/output) in other ways, the manifest would be a good place to start.
214225

215-
The manifest data can be extracted into a json file for easy consumption using the [`WebpackManifestPlugin`](https://github.com/danethurber/webpack-manifest-plugin).
226+
The manifest data can be extracted into a json file for easy consumption using the [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin).
216227

217228
We won't go through a full example of how to use this plugin within your projects, but you can read up on [the concept page](/concepts/manifest) and the [caching guide](/guides/caching) to find out how this ties into long term caching.
218229

0 commit comments

Comments
 (0)