亲自动手构建属于你的项目-webpack4为你保驾护航

2023-11-26 02:53:14

## 前言
作为一名前端开发人员，你一定对项目构建并不陌生。而 webpack 作为一款强大的构建工具，以其灵活的配置和丰富的生态而闻名。在本文中，我们将向你展示如何利用 webpack4 从头开始构建一个属于你的脚手架，让你能够更轻松地管理和创建项目，提升开发效率。

## 准备工作

首先，你必须确保你的计算机已经安装了 Node.js 和 npm。如果你还没有，请访问 Node.js 官网下载并安装。然后，通过命令行终端（如命令提示符或终端）运行以下命令安装 webpack：

npm install -g webpack

其次，你需要为你的项目创建一个目录。在这个目录中，创建一个新的 package.json 文件。你可以通过以下命令创建：

npm init -y

这个命令将创建一个新的 package.json 文件，其中包含项目的基本信息。

## 搭建脚手架

接下来，我们将开始构建脚手架。在项目目录中，创建一个名为 webpack.config.js 的文件。这个文件将包含 webpack 的配置信息。

在 webpack.config.js 文件中，添加以下代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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