从负一开始构建一个基于webpack4的项目

2024-01-24 10:52:53

webpack 4 是一个流行的 JavaScript 模块捆绑程序，用于将多个文件组合成一个或多个捆绑文件，以便在 Web 浏览器中加载。对于初学者来说，从头开始构建一个 webpack 4 项目可能会让人望而生畏，但通过遵循以下步骤，你可以轻松上手。

初始化项目

首先，初始化一个新项目。你可以使用以下命令在终端中执行此操作：

mkdir webpack-project
cd webpack-project
npm init -y

这将创建一个名为 webpack-project 的新目录并初始化一个新的 npm 项目。

安装 webpack

接下来，你需要安装 webpack。你可以使用以下命令通过 npm 安装它：

npm install webpack webpack-cli --save-dev

这将安装 webpack 和 webpack-cli（命令行界面）作为开发依赖项。

创建 webpack 配置文件

接下来，你需要创建一个 webpack 配置文件。你可以将其命名为 webpack.config.js 并将其添加到项目根目录中。此文件将包含你的 webpack 配置设置。

配置 webpack

在 webpack.config.js 文件中，添加以下配置：

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