webpack构建项目（四）webpack六大配置模块

最新推荐文章于 2025-10-12 13:04:44 发布

原创

最新推荐文章于 2025-10-12 13:04:44 发布 · 978 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #学习

这篇博客详细介绍了webpack的六大配置模块：entry、output、module、resolve、devServer和optimization。从单入口、多入口的设置，到output的filename、path、publicPath等属性，再到模块处理和开发服务器配置，最后提到了性能优化的使用示例，旨在帮助读者深入理解并灵活运用webpack进行项目构建。

系列文章目录

webpack构建项目（三）性能优化

前言

前面已经大致学习了webpack并且已经有了一定的实战经验，
下面来深入理解 webpack的五大核心概念。

一、entry

单入口
打包形成一个chunk。输出一个bundle文件。
此时chunk的名称默认是 main

  `entry:'./src/index.js'`

多入口
所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
只有在HMR功能中让html热更新生效

entry:['./src/index.js', './src/add.js']

object
多入口
有几个入口文件就形成几个chunk，输出几个bundle文件
此时chunk的名称是 key

entry: {
   
   
    index: ['./src/index.js', './src/count.js'], 
    add: './src/add.js'
  }

特殊用法

  
        {
    
    
          // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
          index: ['./src/index.js', './src/count.js'], 
          // 形成一个chunk，输出一个bundle文件。
          add: './src/add.js'
        } ```

二、output

① 属性
filename： 文件名称（指定名称+目录）

path： 输出文件目录（将来所有资源输出的公共目录）

publicPath： 所有资源引入公共路径前缀

chunkFilename： 非入口chunk的名称

library： 整个库向外暴露的变量名【将库暴露出去让外面引入使用】

libraryTarget： 变量名添加到哪个上

② 使用示例

output: {
   
   
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build')

最低0.47元/天解锁文章