webpack4 - 配置文件分离（详细教程）

在Webpack4中，可以通过将配置文件拆分为多个小文件来使配置更加清晰和易于维护。下面是一个详细的教程来帮助你进行配置文件的分离。

1. 创建一个名为webpack.config.js的主配置文件。这个文件将会引入其他的配置文件。

const path = require('path');
const merge = require('webpack-merge');

const baseConfig = require('./webpack.base.conf');
const devConfig = require('./webpack.dev.conf');
const prodConfig = require('./webpack.prod.conf');

module.exports = (env, argv) => {
  let config = {};

  if (argv.mode === 'development') {
    config = merge(baseConfig, devConfig);
  }

  if (argv.mode === 'production') {
    config = merge(baseConfig, prodConfig);
  }

  return config;
};

这个配置文件通过require引入了三个额外的配置文件：webpack.base.conf、webpack.dev.conf和webpack.prod.conf。根据运行模式的不同，它将会合并不同的配置文件。

1. 创建一个名为webpack.base.conf.js的基本配置文件。在这个文件中，你可以定义entry、output、module和resolve等基本配置。

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }
};

在这个文件中，我们定义了一个main入口文件和一个bundle.js输出文件。我们还定义了一些加载器和解析器来处理JavaScript、CSS和图片文件。

1. 创建一个名为webpack.dev.conf.js的开发配置文件。在这个文件中，你可以定义开发模式下的特定配置，比如是否启用热更新和使用的devServer。

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

在这个文件中，我们定义了开发模式和源代码映射选项。我们还启用了热更新和设置了devServer的contentBase。

1. 创建一个名为webpack.prod.conf.js的生产配置文件。在这个文件中，你可以定义生产模式下的特定配置，比如代码压缩和优化等。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
};

在这个文件中，我们定义了生产模式和代码压缩的选项。

1. 安装webpack-merge，这是一个用于合并配置的工具。

npm install webpack-merge --save-dev

1. 现在你可以运行Webpack并指定运行模式了。

# 开发模式
npm run start

# 生产模式
npm run build

在运行Webpack时，它会根据命令行参数中的mode值加载不同的配置文件。配置文件之间的共享配置将会通过webpack-merge工具来合并。

通过分离配置文件，你可以更好地组织和管理你的Webpack配置，使其更加灵活和易于维护。