more externals edits

Author: yyx990803

en/build-config.md

@@ -8,6 +8,7 @@ The server config is meant for generating the server bundle that will be passed
 
 ``` js
 const merge = require('webpack-merge')
+const nodeExternals = require('wepback-node-externals')
 const baseConfig = require('./webpack.base.config.js')
 const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
 
@@ -29,21 +30,14 @@ module.exports = merge(baseConfig, {
   },
 
   // https://webpack.js.org/configuration/externals/#function
+  // https://github.com/liady/webpack-node-externals
   // Externalize app dependencies. This makes the server build much faster
   // and generates a smaller bundle file.
-  externals: (context, request, cb) => {
-    // a module is externalized if...
-    if (
-      // it's inside node_modules
-      /node_modules/.test(context) &&
-      // ... and not a CSS file, in case we need to import CSS from a dependency
-      !/\.(css|styl(us)?|less|sass|scss)(\?[^.]+)?$/.test(request)
-    ) {
-      cb(null, `commonjs ${request}`)
-    } else {
-      cb()
-    }
-  },
+  externals: nodeExternals({
+    // do not externalize dependencies that need to be processed by webpack.
+    // you can add more file types here e.g. raw *.vue files
+    whitelist: /\.css$/
+  }),
 
   // This is the plugin that turns the entire output of the server build
   // into a single JSON file. The default file name will be

en/css.md

@@ -91,18 +91,16 @@ A few things to take note when importing CSS from an NPM dependency:
   module.exports = {
     // ...
     plugins: [
-      // extract files in `node_modules` into a vendor chunk for better caching
+      // it is common to extract deps into a vendor chunk for better caching.
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         minChunks: function (module) {
-          // The extraction logic is actually the same as `externals`
-          // in the server config. We can extract the common logic into
-          // a helper.
+          // a module is extracted into the vendor chunk when...
           return (
             // if it's inside node_modules
             /node_modules/.test(module.context) &&
             // do not externalize if the request is a CSS file
-            !/\.(css|styl(us)?|less|sass|scss)(\?[^.]+)?$/.test(module.request)
+            !/\.css$/.test(module.request)
           )
         }
       }),