基本配置

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

5 大模块

1. Entry 入口文件

项目打包的起点，Webpack 会从这里开始分析模块依赖

2. Output 输出设置

指示 Webpack 打包完的文件的保存位置和命名方式

3. Loader 加载器（资源转换器）

告诉 Webpack 如何处理非 JS 资源（如 CSS、图片等），让它们也能被打包

4. Plugins 插件

扩展 Webpack 功能，比如生成 HTML 文件、管理项目规范的 Eslist

5. Mode 运行模式

控制打包是开发调试用（development）还是上线优化用（production）

核心功能流程

Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

export default {
  entry: '', // 入口文件，相对路径和绝对路径都可以
  output: {}, // 输出
  // 加载器 loader
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: '',
};

• Webpack 是基于 Node.js 运行的
• 默认会使用 Common.js 模块化规范，
• 不过我们这里使用 ESM 标准来配置

修改配置文件

1. 配置文件

// webpack.config.js
import path from 'path';
import { fileURLToPath } from 'url';

// 修复 __dirname 在 ESM 中没有的问题
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包后的根目录，项目的绝对路径
    filename: 'main.js', // 打包后的主文件
  },
  // 加载器 loader
  module: {
    rules: [
    
    ],
  },
  // 插件
  plugins: [
    
  ],
  // 开发服务器 不会输出资源，在内存中编译打包的
  devServer:{ // dev-Server
  
  },
  // 模式
  mode: 'development',
};

2. 运行指令

• 这时就不需要再指定入口文件和运行模式再启动了，因为配置文件里面有指定

npx webpack

此时功能和之前一样，也不能处理样式资源

小结

Webpack 的配置将来都通过 webpack.config.js 文件进行修改，来扩展 Webpack 的功能

我们后面会以两个模式来分别搭建 Webpack ，先进行开发模式，再完成生产模式