webpack5从入门到入土

2024-01-07 00:49:05

好的，我会根据输入的内容撰写一篇关于webpack5配置实践的文章，请稍等。

webpack5配置实践篇

webpack的配置真的是又多又杂，而且随着webpack从v4到v5之后又发生很多的变化。正好最近在做一个react+ts的项目，所以把整个项目的webpack5的配置全部梳理了一遍，在此记录一下实践过程，以便以后遇到相关问题的时候能够快速定位和解决。

webpack5的配置主要分为以下几个部分：

基础配置 ：主要包括入口文件、输出路径、模式等基本信息。
loader配置 ：用于加载和处理各种类型的文件，例如js、css、图片等。
插件配置 ：用于扩展webpack的功能，例如代码压缩、代码分割等。
devServer配置 ：用于开发环境下的本地服务器配置。

其中，基础配置和loader配置是webpack中最基本也是最重要的两个部分。插件配置和devServer配置则属于进阶配置，一般只有在需要的时候才会用到。

基础配置

webpack5的基础配置主要包括以下几个方面：

入口文件 ：指定webpack打包的入口文件，通常是项目的主文件。
输出路径 ：指定webpack打包后的输出路径，通常是项目的dist目录。
模式：指定webpack的运行模式，有development和production两种模式。development模式用于开发环境，production模式用于生产环境。

以下是一个webpack5的基础配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  mode: 'development',
};

loader配置

webpack5的loader配置主要用于加载和处理各种类型的文件。例如，我们可以使用css-loader来处理css文件，使用babel-loader来处理js文件，使用file-loader来处理图片文件等等。

以下是一个webpack5的loader配置示例：

const path = require('path');

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

插件配置

webpack5的插件配置主要用于扩展webpack的功能。例如，我们可以使用webpack-merge来合并多个webpack配置，使用webpack-bundle-analyzer来分析webpack的打包结果等等。

以下是一个webpack5的插件配置示例：

const path = require('path');

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

devServer配置

webpack5的devServer配置主要用于开发环境下的本地服务器配置。例如，我们可以指定本地服务器的端口号，是否自动打开浏览器等等。

以下是一个webpack5的devServer配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack-merge(),
    new webpack-bundle-analyzer(),
  ],
  devServer: {
    port: 8080,
    open: true,
  },
  mode: 'development',
};