实战 Webpack - 区分生产环境和开发环境

在实际前端项目开发中，我们可能需要在开发阶段和生产环境中分别使用不同的 Webpack 配置，以满足不同环境下的需求。因此，本篇文章将介绍如何使用 Webpack 区分开发环境和生产环境，并提供相关示例代码。

区分开发环境和生产环境

在开发阶段中，我们通常需要进行代码热更新和调试等操作，而在生产环境中则需要进行代码压缩和优化等操作。因此，我们需要针对不同的环境分别配置 Webpack。

在 Webpack 中，我们可以通过 process.env.NODE_ENV 来区分当前运行的环境。在开发环境中，该值通常为 development，而在生产环境中则为 production。因此，我们可以通过判断该值来确定要使用的 Webpack 配置。

配置示例

下面是一个简单的示例，展示如何在 Webpack 中区分开发环境和生产环境，并使用不同的配置。

开发环境配置文件

// javascriptcn.com 代码示例
// webpack.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

在开发环境中，我们使用了 devtool: 'eval-source-map' 来生成方便调试的 Source Map，并开启了 Webpack 的热更新功能。

生产环境配置文件

// javascriptcn.com 代码示例
// webpack.prod.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'style.[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

在生产环境中，我们使用了多个插件对代码进行压缩和优化，包括了 CleanWebpackPlugin、TerserPlugin、MiniCssExtractPlugin 等，以便生成高效的生产代码。

公共配置文件

除了区分开发环境和生产环境外，我们可能还需要一份公共的配置文件，包括了共用的插件、 loaders 等配置。

// javascriptcn.com 代码示例
// webpack.common.js

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};

在公共配置文件中，我们配置了 babel-loader 和 file-loader 来转换 JavaScript 和处理图片资源等。

Webpack 配置合并

为了让开发环境和生产环境中的 Webpack 配置更加清晰，我们可以通过 webpack-merge 模块将公共配置文件和各自环境的配置文件进行合并。

// javascriptcn.com 代码示例
// webpack.config.js

const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');

module.exports = (env) => {
  const isDevelopment = env.NODE_ENV === 'development';

  const modeConfig = isDevelopment ? devConfig : prodConfig;

  return merge(commonConfig, modeConfig);
};

在最终的 Webpack 配置文件中，我们根据传入的 env.NODE_ENV 来判断当前运行的环境，并将公共配置文件和该环境的配置文件进行合并。

总结

通过本文的介绍，我们学习了如何使用 Webpack 区分开发环境和生产环境，并了解了如何对这两种环境分别进行 Webpack 配置。该方法可以提高我们的开发效率，同时确保我们的项目在不同环境下都能够正常运行。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65436c6b7d4982a6ebd2e5fb