保姆级 webpack 教程：几分钟极速上手webpack

2024-01-23 21:39:48

简介

在如今前端开发中，webpack 已成为必不可少的利器。它可以将分散的 JavaScript 模块打包成一个或多个文件，同时提供模块化的打包机制，提高开发效率。本文将介绍 webpack 的基本用法，帮助你快速上手。

环境准备

在开始学习 webpack 之前，你需要确保已经安装了 Node.js 和 npm。Node.js 是一个 JavaScript 运行时环境，而 npm 是 Node.js 的包管理器，可以用来安装和管理 Node.js 包。

安装 webpack

使用 npm 安装 webpack：

npm install webpack --save-dev

这会在你的项目中安装 webpack。

配置 webpack

在项目根目录下创建一个名为 webpack.config.js 的文件。webpack 会自动读取并解析这个文件。

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // 加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  // 插件
  plugins: [
    // html-webpack-plugin
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html',
    }),
  ],
};