webpack 系列一：基础篇

前端

2024-01-22 18:55:35

webpack 介绍

webpack 是一个现代化的 JavaScript 应用程序构建工具。它可以将许多松散的模块打包成一个或多个捆绑文件，以便在浏览器中加载。webpack 具有许多强大的功能，例如代码分割、热模块替换、按需加载等。

webpack 配置

webpack 的配置主要通过一个配置文件来完成，该配置文件通常命名为 webpack.config.js。在该配置文件中，我们可以指定 webpack 的各种配置项，例如：

入口文件：指定 webpack 需要打包的主 JavaScript 文件。
输出文件：指定 webpack 打包后的输出文件。
加载器：指定 webpack 用于加载不同类型文件的加载器。
插件：指定 webpack 用于扩展其功能的插件。

从 0 到 1 配置 webpack 项目

现在，让我们从头开始配置一个能够解析 JavaScript 和 CSS 代码的 webpack 项目。

安装 webpack

首先，我们需要安装 webpack 和其他一些必要的依赖项。我们可以通过以下命令安装它们：

npm install webpack webpack-cli --save-dev

创建 webpack 配置文件

接下来，我们需要创建一个 webpack 配置文件。我们可以创建一个名为 webpack.config.js 的文件，并将其放在项目根目录下。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};