Webpack安装和配置指南：为你的项目开启前端构建之旅

2024-01-08 12:51:44

Webpack 安装

1. 安装 Node.js

在使用 webpack 之前，你需要安装 Node.js。你可以从 Node.js 官网下载并安装最新版本的 Node.js。

2. 安装 webpack

安装 Node.js 后，你就可以安装 webpack 了。你可以使用 npm 来安装 webpack：

npm install webpack-cli -g

3. 创建项目

安装好 webpack 后，你可以创建一个新的项目来开始使用 webpack。首先，创建一个新的目录，然后在目录中运行以下命令：

npm init -y

这将创建一个新的 package.json 文件，该文件包含了项目的基本信息。

4. 安装 webpack 配置文件

在项目目录中，运行以下命令安装 webpack 配置文件：

npm install webpack webpack-cli --save-dev

这将安装 webpack 和 webpack-cli，后者是一个命令行工具，可用于运行 webpack。

Webpack 配置

1. 创建 webpack 配置文件

在项目目录中，创建一个名为 webpack.config.js 的文件，并添加以下内容：

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 模块加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};