总结Webpack相关内容

Webpack 内容总结与示例

一、核心概念

1. 入口（Entry）

   • 指定打包的起点，Webpack 从这里开始构建依赖图。
   • 示例：entry: './src/index.js'

2. 输出（Output）

   • 定义打包后文件的输出位置和命名规则。
   • 示例：

     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     }
     

3. 加载器（Loaders）

   • 处理非 JavaScript 文件（如 CSS、图片），需在 module.rules 中配置。
   • 示例：使用 Babel 转换 ES6+ 语法：

     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: 'babel-loader'
         }
       ]
     }
     

4. 插件（Plugins）

   • 扩展 Webpack 功能（如生成 HTML 模板、提取 CSS）。
   • 示例：自动生成 index.html：

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })];
     

5. 模式（Mode）

   • 设置开发或生产环境，默认启用对应优化。
   • 示例：mode: 'development'

二、完整配置示例

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: 'bundle.[contenthash].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 提取 CSS 到单独文件
      },
      {
        test: /\.(png|svg|jpg)$/,
        type: 'asset/resource', // Webpack 5 内置处理资源文件
        generator: {
          filename: 'images/[hash][ext]' // 输出到 images 目录
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })
  ],
  devServer: {
    static: './dist',
    hot: true,
    port: 3000
  }
};

三、典型场景示例

1. 处理 JavaScript（Babel 转换）

   • 安装依赖：

     npm install babel-loader @babel/core @babel/preset-env
     

   • 创建 .babelrc 文件：

     { "presets": ["@babel/preset-env"] }
     

2. 处理 CSS 与预处理器（Sass）

   • 安装依赖：

     npm install sass sass-loader css-loader mini-css-extract-plugin
     

   • 修改 module.rules：

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

3. 图片与字体处理（Webpack 5 资源模块）

   • 无需额外 Loader，直接配置：

     {
       test: /\.(png|svg|woff2)$/,
       type: 'asset/resource',
       generator: { filename: 'assets/[hash][ext]' }
     }
     

4. 开发服务器与热更新

   • 安装依赖：npm install webpack-dev-server
   • 运行命令：npx webpack serve --open

四、常见问题与解决

1. 路径错误

   • 使用 path.resolve(__dirname, '路径') 确保绝对路径。

2. Loader 顺序问题

   • Loader 从右到左执行，例如：['style-loader', 'css-loader'] 会先执行 css-loader。

3. 缓存失效

   • 在文件名中添加 [contenthash]（如 bundle.[contenthash].js）。

4. 生产环境优化

   • 使用 TerserWebpackPlugin 压缩 JS，CssMinimizerPlugin 压缩 CSS。

五、总结

Webpack 通过入口→加载器→插件→输出的流程，将分散的模块打包为优化的静态资源。合理配置 Loader 处理各类文件，利用插件扩展功能，并通过 mode 区分环境，可显著提升开发效率与应用性能。