webpack的学习打包工具

一、Webpack 核心概念

1. 入口（Entry）

指定 Webpack 构建的起点，从该文件开始递归解析所有依赖模块。

javascript

运行

// webpack.config.js
module.exports = {
  entry: './src/index.js' // 单入口
  // 多入口：entry: { app: './src/app.js', admin: './src/admin.js' }
};

2. 输出（Output）

配置打包后的文件输出路径和名称。

javascript

运行

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录（绝对路径）
    filename: 'bundle.js', // 单入口文件名
    // 多入口：filename: '[name].[chunkhash].js'（[name]为入口名，[chunkhash]为哈希值）
    clean: true // 打包前清空dist目录
  }
};

3. 加载器（Loader）

Webpack 默认仅支持 JS/JSON 文件，Loader 用于处理非 JS 文件（如 CSS、图片、TS），将其转为模块。

• 常用 Loader ：
  • css-loader：解析 CSS 文件。
  • style-loader：将 CSS 注入 DOM。
  • file-loader/url-loader：处理图片、字体等资源。
  • babel-loader：将 ES6 + 转为 ES5。

javascript

运行

module.exports = {
  module: {
    rules: [
      // 处理CSS
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理图片（小于8kb转Base64）
      { test: /\.(png|jpg|gif)$/, use: [{ loader: 'url-loader', options: { limit: 8192 } }] },
      // 处理ES6+
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  }
};

4. 插件（Plugin）

Plugin 用于扩展 Webpack 功能（如代码压缩、生成 HTML、环境变量注入），可处理整个构建过程。

• 常用 Plugin ：
  • HtmlWebpackPlugin：生成 HTML 文件并自动引入打包后的 JS。
  • MiniCssExtractPlugin：提取 CSS 为单独文件（替代 style-loader）。
  • TerserPlugin：压缩 JS 代码。
  • DefinePlugin：注入环境变量。

javascript

运行

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }), // 基于模板生成HTML
    new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css' }) // 提取CSS
  ]
};

5. 模式（Mode）

指定构建环境，Webpack 会自动启用对应优化：

• development：开发模式（不压缩代码，保留 source map）。
• production：生产模式（压缩代码、优化性能，默认）。
• none：无默认优化。

javascript

运行

module.exports = {
  mode: 'production'
};

二、核心功能与配置

1. 开发环境配置

• devServer：提供开发服务器（热更新、代理）。

bash

运行

npm install webpack-dev-server --save-dev

javascript

运行

module.exports = {
  devServer: {
    static: './dist', // 静态资源目录
    port: 3000, // 端口
    hot: true, // 热模块替换（HMR）
    proxy: { '/api': 'http://localhost:8080' } // 接口代理
  },
  devtool: 'inline-source-map' // 生成source map（便于调试）
};

2. 生产环境优化

• 代码分割 ：拆分代码（如第三方库、公共代码），减小单文件体积。

  javascript

  运行

  module.exports = {
    optimization: {
      splitChunks: { chunks: 'all' } // 分割node_modules代码
    }
  };

• 缓存 ：通过[contenthash]命名文件，实现浏览器缓存（内容不变则哈希不变）。

• Tree Shaking：移除未使用的代码（需 ES 模块，mode 为 production 自动启用）。

3. 处理 CSS 进阶

• postcss-loader：自动添加 CSS 前缀（配合autoprefixer）。
• sass-loader：处理 SCSS/SASS 文件。

javascript

运行

{
  test: /\.scss$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}

三、常见配置示例（完整 webpack.config.js）

javascript

运行

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[chunkhash].js',
    clean: true
  },
  mode: 'production',
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        type: 'asset/resource', // Webpack5内置，替代file-loader
        generator: { filename: 'images/[hash][ext][query]' }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html', minify: true }),
    new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css' })
  ],
  optimization: { splitChunks: { chunks: 'all' } }
};

四、Webpack 5 新特性

• 内置资源处理 ：无需file-loader/url-loader，通过type: 'asset'处理资源。
• 模块联邦：实现跨应用共享模块（微前端常用）。
• 持久化缓存：提升二次构建速度。
• 更好的 Tree Shaking：支持 CommonJS 模块的 Tree Shaking。

五、学习建议与总结

1. 核心总结

概念	作用	常用工具
Entry	构建入口	单入口 / 多入口配置
Output	打包输出	路径、文件名、哈希配置
Loader	处理非 JS 文件	css-loader、babel-loader 等
Plugin	扩展功能	HtmlWebpackPlugin、MiniCssExtractPlugin
Mode	环境配置	development/production

2. 学习路径

1. 基础配置：掌握入口、输出、Loader、Plugin 的基本使用。
2. 环境区分：开发环境（devServer、source map）与生产环境（优化、缓存）分离配置。
3. 高级优化 ：代码分割、Tree Shaking、懒加载（import()动态导入）。
4. 框架集成：学习 Vue/React 的 Webpack 配置（如 vue-cli、create-react-app 的底层配置）。

3. 常见问题

• Loader 顺序 ：从右到左执行（如style-loader!css-loader先执行 css-loader）。
• Plugin 与 Loader 区别：Loader 处理文件转换，Plugin 处理构建流程。
• 性能优化 ：合理拆分代码、利用缓存、减少 Loader 范围（如exclude: /node_modules/）