从零开始之Webpack入门指南

2023-11-07 03:38:11

Webpack是什么？

Webpack 是一个现代的前端构建工具，它可以帮助你打包和管理你的代码、样式和资源。Webpack 是一个非常强大的工具，它可以让你轻松地创建模块化代码并将其打包成一个或多个文件。Webpack 还支持多种预处理器和插件，这可以让你轻松地对你的代码进行各种操作，例如编译、压缩、混淆等。

2. Webpack入门步骤

2.1 安装Webpack

Webpack是一个Node.js模块，因此你需要首先安装Node.js。

npm install -g webpack

2.2 创建Webpack配置文件

Webpack的配置文件通常命名为webpack.config.js，它是一个JavaScript文件，用于配置Webpack的各种选项。

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

2.3 运行Webpack

Webpack提供了一个CLI工具，你可以通过该工具运行Webpack。

webpack

Webpack将根据你的配置文件打包你的代码并将其输出到指定的位置。

3. Webpack实战

3.1 使用Webpack构建一个简单的项目

创建一个名为my-project的项目目录，并在该目录中创建一个名为src的子目录。

mkdir my-project
cd my-project
mkdir src

在src目录中，创建一个名为index.js的文件，并输入以下代码：

console.log("Hello, World!");

在项目目录中，创建一个名为webpack.config.js的文件，并输入以下代码：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "./dist",
    filename: "bundle.js"
  }
};

在项目目录中，运行以下命令：

webpack

Webpack将根据你的配置文件打包你的代码并将其输出到dist目录。

3.2 使用Webpack构建一个更复杂的项目

你可以使用Webpack构建更复杂的项目，例如一个React项目或一个Vue项目。

创建一个名为my-react-project的项目目录，并在该目录中创建一个名为src的子目录。

mkdir my-react-project
cd my-react-project
mkdir src

在src目录中，创建一个名为index.js的文件，并输入以下代码：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

在src目录中，创建一个名为index.html的文件，并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

在项目目录中，创建一个名为webpack.config.js的文件，并输入以下代码：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};