如何仅对Webpack部分入口应用优化配置？

当然有办法实现只给指定入口应用优化配置，完全不用复制两份重复的配置，下面给你两种实用的方案：

方案一：在splitChunks中通过过滤逻辑指定目标入口 #

你可以在optimization.splitChunks的配置里，利用自定义过滤函数，只对app入口相关的chunk生效。修改你的optimization配置如下：

optimization: {
  splitChunks: {
    chunks: (chunk) => {
      // 仅处理名为app的入口chunk及其衍生的异步chunk
      return chunk.name === 'app' || chunk.name.startsWith('app~');
    },
    // 保留你原有的其他splitChunks配置项
  },
  runtimeChunk: (entrypoint) => {
    // 只给app入口生成对应的runtime chunk
    return entrypoint.name === 'app' ? `runtime_${entrypoint.name}` : false;
  },
},

这样splitChunks只会处理app入口相关的代码，server入口完全不会触发代码分割；runtimeChunk也仅为app生成对应的runtime文件。

方案二：拆分配置为基础+入口专属配置 #

用webpack-merge把通用配置（模块规则、插件、resolve等）抽离出来，再分别生成客户端和服务端的专属配置并合并基础配置，既避免重复又能灵活控制不同入口的优化项：

1. 先安装依赖：

npm install webpack-merge --save-dev

2. 拆分配置文件：

• webpack.base.js：存放通用配置

// webpack.base.js
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  output: {
    path: __dirname + '/dist',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] },
      { test: /\.css$/, loader:['style-loader', 'css-loader'] },
      { test: /\.(gif|png|jpe?g|svg)$/i, use: [ 'file-loader', { loader: 'image-webpack-loader', }, ], },
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*'] }),
    new CopyPlugin([ { from: 'public/index.html' }, ])
  ],
  devtool: 'inline-source-map',
  devServer: { publicPath: '/dist', contentBase: __dirname + '/dist', hot: true, }
};

• webpack.client.js：客户端专属配置（包含app入口和优化项）

// webpack.client.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  entry: { app: './src/client.js' },
  optimization: {
    splitChunks: { chunks: 'all', },
    runtimeChunk: { name: entrypoint => `runtime_${entrypoint.name}`, },
  },
});

• webpack.server.js：服务端专属配置（包含server入口，无优化项）

// webpack.server.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  entry: { server: './src/server.js' },
  // 服务端需添加target配置，避免打包Node.js内置模块
  target: 'node',
  optimization: {
    splitChunks: false,
    runtimeChunk: false
  },
});

3. 修改package.json脚本：

"scripts": {
  "build:client": "webpack --config webpack.client.js",
  "build:server": "webpack --config webpack.server.js",
  "build": "npm run build:client && npm run build:server"
}

这种方式扩展性极强，后续给服务端加专属配置（比如处理样式的特殊规则）也非常方便。

对你现有Webpack配置的优化建议 #

1. 服务端样式处理修复：server是服务端入口，style-loader会操作DOM，在Node.js环境下完全不兼容，建议给服务端配置替换为css-loader/locals（仅导出类名）或者mini-css-extract-plugin（提取成单独CSS文件，服务端可读取后注入HTML）。

2. 区分环境配置devtool：inline-source-map适合开发环境，但生产环境建议用source-map（单独生成sourcemap文件，不影响打包体积），可以通过环境变量切换：

devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',

3. 添加mode配置：Webpack的mode会自动启用对应环境的内置优化，务必加上：

mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',

4. 增强图片压缩效果：给image-webpack-loader添加具体压缩参数，提升图片优化效率：

{
  loader: 'image-webpack-loader',
  options: {
    mozjpeg: { quality: 80, progressive: true },
    pngquant: { quality: [0.6, 0.8] },
    gifsicle: { interlaced: false }
  }
}

内容的提问来源于stack exchange，提问作者Tralgar