Skip to content

Commit ca4d352

Browse files
committed
update externalize docs
1 parent aed7d86 commit ca4d352

File tree

3 files changed

+26
-13
lines changed

3 files changed

+26
-13
lines changed

en/build-config.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,22 @@ module.exports = merge(baseConfig, {
2828
libraryTarget: 'commonjs2'
2929
},
3030

31+
// https://webpack.js.org/configuration/externals/#function
3132
// Externalize app dependencies. This makes the server build much faster
32-
// and generates a smaller bundle file. Note if you want a dependency
33-
// to be processed by webpack (e.g. UI lib that provides raw *.vue files),
34-
// do NOT include it here.
35-
externals: Object.keys(require('/path/to/package.json').dependencies),
33+
// and generates a smaller bundle file.
34+
externals: (context, request, cb) => {
35+
// a module is externalized if...
36+
if (
37+
// it's inside node_modules
38+
/node_modules/.test(context) &&
39+
// ... and not a CSS file, in case we need to import CSS from a dependency
40+
!/\.(css|styl(us)?|less|sass|scss)(\?[^.]+)?$/.test(request)
41+
) {
42+
cb(null, `commonjs ${request}`)
43+
} else {
44+
cb()
45+
}
46+
},
3647

3748
// This is the plugin that turns the entire output of the server build
3849
// into a single JSON file. The default file name will be

en/bundle-renderer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This is straightforward, however whenever you edit your app source code, you wou
1414

1515
`vue-server-renderer` provides an API called `createBundleRenderer` to deal with this problem. With a custom webpack plugin, the server bundle is generated as a special JSON file that can be passed to the bundle renderer. Once the bundle renderer is created, usage is the same as the normal renderer, however the bundle renderer provides the following benefits:
1616

17-
- Built-in source map support (with `devtool: 'source-map'`)
17+
- Built-in source map support (with `devtool: 'source-map'` in webpack config)
1818

1919
- Hot-reload during development and even deployment (by simply reading the updated bundle and re-creating the renderer instance)
2020

en/css.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ module.exports = {
8383

8484
A few things to take note when importing CSS from an NPM dependency:
8585

86-
1. In the server webpack config, do not include that dependency in `externals`.
86+
1. It should not be externalized in the server build.
8787

8888
2. If using CSS extraction + vendor extracting with `CommonsChunkPlugin`, `extract-text-webpack-plugin` will run into problems if the extracted CSS in inside an extracted vendors chunk. To work around this, avoid including CSS files in the vendor chunk. An example client webpack config:
8989

@@ -95,13 +95,15 @@ A few things to take note when importing CSS from an NPM dependency:
9595
new webpack.optimize.CommonsChunkPlugin({
9696
name: 'vendor',
9797
minChunks: function (module) {
98-
// do not put CSS into the vendor chunk so that it can be extracted
99-
// otherwise extract-text-webpack-plugin will be confused
100-
if (/\.(css|styl(us)?|less|sass|scss)(\?[^.]+)?$/.test(module.userRequest)) {
101-
return false
102-
}
103-
// this assumes your vendor imports exist in the node_modules directory
104-
return module.context && module.context.indexOf('node_modules') !== -1;
98+
// The extraction logic is actually the same as `externals`
99+
// in the server config. We can extract the common logic into
100+
// a helper.
101+
return (
102+
// if it's inside node_modules
103+
/node_modules/.test(module.context) &&
104+
// do not externalize if the request is a CSS file
105+
!/\.(css|styl(us)?|less|sass|scss)(\?[^.]+)?$/.test(module.request)
106+
)
105107
}
106108
}),
107109
// extract webpack runtime & manifest

0 commit comments

Comments
 (0)