Webpack 配置：兼顾 React 与 Vue 的开发环境

2023-12-02 16:20:23

React 和 Vue 是当今最流行的前端框架，它们具有许多共同点，但也存在一些差异。为了在开发环境中同时使用这两个框架，我们需要对 Webpack 进行一些配置。

首先，我们需要安装 Webpack 和相关的插件。可以使用以下命令安装 Webpack：

npm install --save-dev webpack

然后，我们可以使用以下命令安装 Webpack 的各种插件：

npm install --save-dev webpack-cli webpack-dev-server webpack-merge webpack-hot-middleware

安装完成后，我们需要创建一个 Webpack 配置文件。可以使用以下命令创建一个名为 webpack.config.js 的配置文件：

touch webpack.config.js

在 webpack.config.js 文件中，我们可以写入以下内容：

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

module.exports = env => {
  const { mode = 'development' } = env;
  const isProduction = mode === 'production';

  const commonConfig = {
    entry: {
      main: './src/index.js',
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
    ],
  };

  const devConfig = {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true,
    },
  };

  const prodConfig = {
    mode: 'production',
    devtool: 'source-map',
  };

  return merge(commonConfig, isProduction ? prodConfig : devConfig);
};

这个配置文件定义了 Webpack 的各种配置，包括入口文件、输出目录、模块加载器、插件等。

接下来，我们需要在项目根目录下创建一个名为 package.json 的文件。可以使用以下命令创建一个 package.json 文件：

touch package.json

在 package.json 文件中，我们可以写入以下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.0.0",
    "webpack-hot-middleware": "^3.0.0",
    "html-webpack-plugin": "^5.0.0",
    "babel-loader": "^8.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-vue": "^7.0.0"
  }
}