Webpack 4配置：实现包含Sass与Babel的生产环境构建脚本

没问题，我来一步步帮你搞定这个生产构建配置，刚好我之前做过类似的场景，这套配置上线后非常稳定！

1. 调整Webpack核心配置 #

首先修改你的webpack.config.js，适配生产环境的输出和静态资源处理：

1.1 设置生产模式与输出目录 #

添加mode: 'production'开启Webpack的生产优化（比如代码压缩、tree shaking），同时指定输出到build文件夹：

const path = require('path');

module.exports = {
  mode: 'production', // 开启生产环境优化
  entry: './src/index.js', // 替换成你的实际入口文件
  output: {
    path: path.resolve(__dirname, 'build'), // 输出到项目根目录下的build文件夹
    filename: 'js/[name].[contenthash].js', // 给js文件加hash，便于浏览器缓存
    chunkFilename: 'js/[name].[contenthash].chunk.js',
    clean: true, // 构建前自动清空build目录，避免旧文件残留
  },
  // ... 保留你已有的loader、devServer等配置
};

1.2 复制public目录的静态资源 #

因为你dev server用了--content-base public，生产环境需要把public里的文件（比如index.html、favicon、静态图片）同步到build目录。这里用copy-webpack-plugin来实现：

先安装依赖：

npm install copy-webpack-plugin --save-dev

然后在Webpack配置里添加插件：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    // ... 保留你已有的插件（比如HtmlWebpackPlugin如果有的话）
    new CopyPlugin({
      patterns: [
        { from: 'public', to: '.' }, // 把public目录下的所有文件复制到build根目录
      ],
    }),
  ],
};

如果你用了HtmlWebpackPlugin生成index.html，记得把它的template参数设为./public/index.html，确保能正确引用打包后的资源。

2. 添加gzip压缩 #

这里提供两种方案，选一种适合你的：

方案一：Webpack构建时生成.gz文件（推荐，减少Nginx运行时压力） #

安装compression-webpack-plugin：

npm install compression-webpack-plugin --save-dev

在Webpack配置里添加插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    // ... 已有插件
    new CompressionPlugin({
      algorithm: 'gzip', // 使用gzip压缩算法
      test: /\.(js|css|html|json|svg)$/, // 匹配需要压缩的文件类型
      threshold: 8192, // 文件大小超过8KB才进行压缩
      minRatio: 0.8, // 压缩率小于0.8时才保留压缩文件（避免无效压缩）
    }),
  ],
};

构建完成后，build目录里会同时存在原文件和对应的.gz压缩文件。

方案二：Nginx动态压缩（无需修改构建流程，适合小项目） #

如果不想在构建阶段生成压缩文件，可以让Nginx在请求时动态压缩响应。在Nginx的全局配置里添加：

http {
  gzip on;
  gzip_vary on;
  gzip_min_length 1024;
  gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
}

3. 配置package.json的构建脚本 #

在package.json的scripts里新增生产构建命令：

{
  "scripts": {
    "dev": "webpack serve --content-base public", // 你的原有开发服务命令
    "build": "webpack --mode production" // 新增的生产构建命令
  }
}

现在运行npm run build，就能在build目录得到完整的生产打包文件了！

4. Nginx部署配置 #

修改Nginx的服务器配置，指向build文件夹：

server {
  listen 80;
  server_name your-domain.com; // 替换成你的实际域名

  root /path/to/your/project/build; // 替换成build文件夹的绝对路径
  index index.html;

  # 单页应用需要配置路由 fallback，避免刷新页面404
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 如果用了方案一（Webpack生成.gz文件），添加这个配置让Nginx优先返回压缩文件
  location ~* \.(js|css|html|json)$ {
    gzip_static on; // 开启静态gzip文件支持
    expires 1y; // 设置1年的浏览器缓存
    add_header Cache-Control "public, immutable";
  }
}

重启Nginx后，访问你的域名就能看到部署好的应用了！

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