博客站

配置 Webpack 的入口（Entry）和出口（Output）是使用 Webpack 的基础步骤。以下是如何配置这两个关键部分的详细说明：

1. 入口（Entry）

入口指定 Webpack 开始构建依赖图的起点文件。可以是一个或多个入口文件。

单入口配置

module.exports = {
  entry: './src/index.js'
};

• 解释：Webpack 从 ./src/index.js 开始构建依赖图。

多入口配置

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: './src/vendor.js'
  }
};

• 解释：Webpack 从 ./src/index.js 和 ./src/vendor.js 两个入口开始构建依赖图，并生成两个独立的打包文件。

2. 出口（Output）

出口指定打包后文件的输出位置和名称。可以配置输出路径、文件名等。

基本配置

const path = require('path');

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

• 解释：
  • path：指定输出目录，path.resolve(__dirname, 'dist') 表示输出到当前目录下的 dist 文件夹。
  • filename：指定输出文件的名称，bundle.js 是打包后的文件名。

多入口输出配置

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  }
};

• 解释：
  • [name] 是占位符，表示入口的名称。Webpack 会根据入口名称生成对应的输出文件，如 app.bundle.js 和 vendor.bundle.js。

3. 完整示例

以下是一个完整的 Webpack 配置文件示例，包含入口和出口的配置：

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [],
  mode: 'development'
};

4. 其他常用输出配置

• publicPath：指定输出文件的公共路径，常用于 CDN 或静态资源服务器。

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/assets/'
  }
  

• chunkFilename：指定非入口 chunk 文件的名称，常用于代码分割。

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  }
  

总结

• 入口（Entry）：指定 Webpack 开始构建依赖图的起点文件，可以是单入口或多入口。
• 出口（Output）：指定打包后文件的输出位置和名称，可以配置输出路径、文件名、公共路径等。

通过合理配置入口和出口，可以灵活地控制 Webpack 的打包行为，满足不同项目的需求。