Vue.js中如何压缩server.js并保存至dist/server目录？

Got it, I see you're currently using CopyWebpackPlugin to move your server files over, but you want to actually minify (uglify) them instead of just copying. Let's fix this—webpack can handle server-side code bundling and compression natively, no need to rely on just copying files. Here's how to adjust your config:

Step 1: Remove the Server Copy Rule from CopyWebpackPlugin #

First, delete the second entry in your CopyWebpackPlugin array since we'll let webpack handle building these files instead:

// Remove this line from your CopyWebpackPlugin config
{ from: path.resolve(__dirname, '../src/server'), to: config.build.assetsServerDirectory, ignore: ['*.sql'] }

Step 2: Add a Server Entry Point #

Tell webpack to process your server code by adding it to the entry object in your config. If you have a main server.js file, it'll look like this:

entry: {
  // Keep your existing entry (like your client app) here
  app: './src/main.js',
  // Add the server entry
  server: './src/server/server.js'
}

If you have multiple server files that need to stay separate (instead of bundled into one), you can use glob to auto-generate entries, but bundling into a single minified file is usually cleaner for server deployment.

Step 3: Configure Output for Server Files #

Update your output settings to send the server bundle to your dist/server directory, and set the correct library target for Node.js (since server code uses require()):

output: {
  path: config.build.assetsRoot, // This should point to your dist folder
  filename: (pathData) => {
    // Send the server bundle to the server subdirectory
    return pathData.chunk.name === 'server' ? 'server/[name].js' : '[name].js';
  },
  chunkFilename: '[id].js',
  // Critical for Node.js: tells webpack to export using CommonJS2 syntax
  libraryTarget: 'commonjs2'
}

Step 4: Set Target to Node #

Server-side code relies on Node.js built-ins (like fs, path), so tell webpack not to bundle those by setting the target:

target: 'node'

This ensures webpack treats your code as Node.js-compatible and doesn't try to replace native modules with browser equivalents.

Step 5: Enable Minification with TerserPlugin #

Webpack 4+ uses TerserPlugin (instead of the old UglifyJsPlugin) for minification—it supports ES6+ and does a better job at uglifying. First, install it if you haven't:

npm install terser-webpack-plugin --save-dev

Then add it to your optimization config:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... rest of your config
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // Optional: remove console.log statements
            dead_code: true // Remove unused code
          },
          mangle: true, // Mangle variable names to reduce file size
          keep_classnames: false, // No need to preserve class names for server code
          keep_fnames: false // No need to preserve function names
        }
      })
    ]
  }
}

Step 6: Handle Additional Server Files (like .sql) #

If you still need to copy non-JS files (like your .sql files) to dist/server, you can keep a modified CopyWebpackPlugin entry just for those:

new CopyWebpackPlugin([
  { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] },
  { from: path.resolve(__dirname, '../src/server'), to: config.build.assetsServerDirectory, include: ['*.sql'] }
])

Now when you run your production build, webpack will bundle and minify your server.js (and any dependencies) into dist/server/server.js, instead of just copying the unminified file over.

内容的提问来源于stack exchange，提问作者A. L