Webpack 常见配置项

1. entry

指定一个或多个入口点，Webpack 从这里开始构建依赖图。

entry: {
  main: './src/index.js',
  admin: './src/admin.js'
}

2. output

指定输出文件的路径和名称。

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/assets/' // 用于生成的资源 URL
}

3. module

配置如何处理不同类型的模块。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            outputPath: 'images'
          }
        }
      ]
    }
  ]
}

4. resolve

配置模块解析规则，例如别名、扩展名等。

resolve: {
  extensions: ['.js', '.json', '.jsx'],
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

5. plugins

配置插件，用于执行更复杂的任务，如优化、压缩、生成 HTML 文件等。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new MiniCssExtractPlugin({
    filename: '[name].css'
  })
]

6. optimization

配置优化选项，如代码分割、懒加载、Tree Shaking 等。

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 10000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 10,
    maxInitialRequests: 5,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        filename: 'vendors~[name].js'
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
        filename: 'common~[name].js'
      }
    }
  },
  usedExports: true, // 启用 Tree Shaking
  minimize: true, // 启用压缩
  minimizer: [new TerserPlugin()] // 使用 TerserPlugin 进行压缩
}

7. devServer

配置开发服务器，用于热重载、实时重新加载等。

devServer: {
  contentBase: path.join(__dirname, 'dist'), // 指定开发服务器提供静态文件的目录
  compress: true, // 启用 gzip 压缩
  port: 9000, // 指定开发服务器监听的端口号
  hot: true, // 启用热模块替换（Hot Module Replacement, HMR）
  open: true // 启动开发服务器后自动打开浏览器
}

8. mode

设置构建模式，development 或 production。

mode: 'production'

9. externals

排除某些模块，使其不在打包结果中，通常用于全局变量或 CDN 引入的库。

externals: {
  jquery: 'jQuery'
}

10. performance

配置性能提示，例如文件大小限制等。

performance: {
  hints: 'warning', // 可以是 'error' 或 'warning'
  maxAssetSize: 200000, // 单个文件的最大体积（字节）
  maxEntrypointSize: 400000, // 入口点的最大体积（字节）
  assetFilter: assetFilename => !/(\.map$)/.test(assetFilename) // 过滤文件
}

11. stats

配置构建输出的详细程度。

stats: 'errors-only' // 只显示错误信息

12. target

指定打包的目标环境，如 web、node 等。

target: 'web'

13. devtool

配置源映射（source map），用于调试。

devtool: 'source-map'

原文地址：https://blog.csdn.net/weixin_57837275/article/details/142462766

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！