webpack 5.68.0版本教程示例详解

什么是 webpack?

Webpack 是一个模块化打包工具，它主要用于将应用程序所需的各种文件（例如 HTML、CSS、JavaScript、图片等）打包成一个或多个静态资源，以便于部署和运行。

Webpack 基础

Webpack 能够将项目中的模块（Module）打包成一个或多个 bundle，适用于各种应用场景。

入口文件

一个 Webpack 的项目需要一个入口（Entry）。入口指定了 Webpack 从哪个文件开始分析项目和编译代码。可以将其理解为一个 JavaScript 文件，即项目的主入口。

Webpack 支持多个入口，以适应各种项目需求。

以下是一个简单的入口文件示例：

// index.js 是入口文件
import './main.js'; // 导入另一个模块

出口文件

Webpack 将多个入口打包成一个或多个 bundle，每个 bundle 都有一个输出文件（Output）。一个输出文件对应一个入口文件。

以下是一个简单的出口文件示例：

// bundle.js 是输出文件
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  }
};

输出文件包含编译后的 JavaScript、CSS、图片、字体等文件，可以通过 HTML 文件引用。

Loaders

Webpack 本身只支持 JavaScript 模块，若需处理其它类型的文件，需要使用 Loaders。Loaders 是一个转换器，将不同的文件转换成模块。

以下是一个简单的 Loaders 示例：

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
};

这段配置将所有 .txt 文件使用 raw-loader 转换为模块。

插件

插件（Plugin）用于扩展 Webpack 的功能。Webpack 核心功能覆盖了大部分场景，但仍有不足，需要使用插件进一步扩展。

以下是一个简单的插件示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

这段配置在编译后的 HTML 文件中自动引入生成的 bundle.js。

示例说明

示例一：使用 Sass 样式

如果你需要在项目中使用 Sass 样式，可以使用 sass-loader 加载器和 node-sass 依赖。

首先安装所需依赖：

npm install sass-loader node-sass --save-dev

然后在 webpack.config.js 文件中增加如下 Loaders 配置：

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

这个配置会使所有以 .scss 结尾的文件被 sass-loader 转换为样式，并通过 css-loader 和 style-loader 打包到 JavaScript 中。

示例二：使用 Babel 技术

如果你的项目需要支持更老的浏览器，或者想使用更新的 JavaScript 语法，可以使用 Babel 工具将代码转换为兼容的 JavaScript 版本。

首先安装 babel-loader 和 @babel/core 依赖：

npm install babel-loader @babel/core --save-dev

然后在 webpack.config.js 文件中增加如下 Loaders 配置：

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

这个配置会使所有 JavaScript 文件使用 babel-loader 转换为兼容的 JavaScript 版本，并通过 @babel/preset-env 预设配置转换。