资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

My Webpack Project

创作时间:

作者:

@小白创作中心

My Webpack Project

引用

CSDN

https://blog.csdn.net/weixin_53961451/article/details/143664167

在 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', // 使用contenthash
    path: 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>