Webpack4进阶 [ 核心配置与实战 ]

2023-12-21 03:00:40

前言

Webpack是一个用于构建和管理JavaScript应用程序的开源模块打包工具。它可以将各种模块和文件打包成一个或多个bundle文件，以方便在浏览器中使用。Webpack4是Webpack的最新版本，它带来了许多新特性和优化，使Webpack的开发和使用更加便捷。

Webpack核心配置

Webpack的核心配置主要包括以下几个部分：

entry ：指定应用程序的入口文件，Webpack将从这里开始构建应用程序。
output ：指定构建后的输出文件，包括文件名、路径以及输出文件的格式。
module ：指定模块加载规则，包括各种模块的解析器和加载器。
plugins ：指定各种插件，用于扩展Webpack的构建功能。
resolve ：指定模块解析规则，包括模块的路径、后缀名以及解析算法。

Webpack实战

1. Webpack基础配置

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

2. Webpack进阶配置

Webpack还支持许多高级配置，如代码分割、代码压缩、代码混淆等。下面是一个Webpack进阶配置示例：

const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ]
};