当前位置：首页 > news >正文

【前端打包必看】webpack入口与出口配置全解析(8)

news 2024/11/14 13:56:54

在 webpack 配置中，入口和出口是非常重要的两个概念。它们分别指定了 webpack 从哪里开始编译以及编译结果输出到哪里。

在这里插入图片描述

node内置模块 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html

1. 入口（Entry）

入口配置告诉 webpack 从哪个文件开始编译。入口通过 entry 属性进行配置。入口真正配置的是 chunk。

基本配置

module.exports = {entry: './src/index.js' // 单个入口
};

多个入口

可以配置多个入口，webpack 会为每个入口创建一个单独的 chunk。

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

动态入口

可以使用函数动态生成入口配置。

module.exports = {entry: () => ({main: './src/index.js',another: './src/another.js'})
};

规则

name：chunkname，即 chunk 的名称，默认为 main。
hash：总的资源 hash，通常用于解决缓存问题。
chunkhash：使用 chunkhash，确保每个 chunk 的 hash 值是唯一的。
id：使用 chunkid，不推荐使用，因为 chunkid 在生产环境中可能会变化，导致缓存失效。

2. 出口（Output）

出口配置告诉 webpack 将编译结果输出到哪里。出口通过 output 属性进行配置。

基本配置

const path = require('path');module.exports = {output: {filename: 'bundle.js', // 输出文件名path: path.resolve(__dirname, 'dist') // 输出路径}
};

多个入口的输出

如果配置了多个入口，可以使用占位符来动态生成输出文件名。

const path = require('path');module.exports = {entry: {main: './src/index.js',another: './src/another.js'},output: {filename: '[name].bundle.js', // 使用[name]占位符path: path.resolve(__dirname, 'dist')}
};

使用哈希值

为了防止浏览器缓存问题，可以在输出文件名中使用哈希值。

hash：总的资源 hash。
chunkhash：每个 chunk 的 hash。
contenthash：根据文件内容生成的 hash，适用于 CSS 文件。

const path = require('path');module.exports = {output: {filename: '[name].[contenthash].js', // 使用contenthashpath: path.resolve(__dirname, 'dist')}
};

公共路径

可以配置公共路径，用于指定资源的加载路径。

const path = require('path');module.exports = {output: {filename: '[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),publicPath: '/assets/' // 公共路径}
};

示例

假设我们有一个项目，使用多个入口和输出配置。

项目结构

my-project/
├── src/
│   ├── index.js
│   └── another.js
├── dist/
├── package.json
└── webpack.config.js

webpack.config.js

const path = require('path');module.exports = {mode: 'development', // 或 'production'entry: {main: './src/index.js',another: './src/another.js'},output: {filename: '[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),publicPath: '/assets/'},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'}},{test: /\.css$/,use: ['style-loader', 'css-loader']}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],devServer: {contentBase: './dist',hot: true}
};

运行构建

在 package.json 中添加一个 build 脚本：

{"scripts": {"build": "webpack"}
}

然后运行：

npm run build

构建完成后，dist 目录下会生成 main.[contenthash].js 和 another.[contenthash].js 文件，你可以在 HTML 文件中引入这些文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Webpack Project</title>
</head>
<body><script src="/assets/main.[contenthash].js"></script><script src="/assets/another.[contenthash].js"></script>
</body>
</html>