搭建webpack脚手架指南：一步步手把手教你上手

前端

2024-01-25 12:55:42

手把手教你搭建简单的webpack脚手架（一）

在本篇文章里，我会介绍如何搭建一个简单的webpack脚手架，并尝试把它解释得非常清楚，帮助刚入门的新手也能理解。

由于篇文章的篇幅限制，我会分成两部分来讲解。本篇会介绍以下内容：

webpack简介
webpack安装
初始化项目
安装必要的依赖
配置webpack.config.js

在后续文章里，我会介绍：

如何使用babel
如何使用css-loader和style-loader
如何使用ts-loader
如何配置热更新

webpack简介

webpack 是一个前端构建工具，可以将各种资源(如 JavaScript、CSS、字体、图像等)打包到一起，生成一个或多个优化后的静态资源。

webpack安装

安装

npm install webpack -g  # 全局安装 webpack
npm install webpack-cli -g  # 全局安装 webpack-cli

检查安装是否成功

webpack -v  # 查看 webpack 版本
webpack-cli -v  # 查看 webpack-cli 版本

初始化项目

mkdir my-webpack-project
cd my-webpack-project

安装必要的依赖

安装webpack、webpack-cli、react、less、typescript、babel和babel-loader。

npm install webpack webpack-cli react less typescript babel babel-loader --save-dev

配置webpack.config.js

在项目根目录下创建webpack.config.js文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
};