📌  相关文章
📜  webpack (1)

📅  最后修改于: 2023-12-03 14:48:25.925000             🧑  作者: Mango

Webpack

Webpack是一款现代JavaScript应用程序的静态模块打包器。它的主要功能是将多个JavaScript模块打包成一个文件，以便在浏览器中使用。

特点

Webpack具有以下特点：

  • 强大的打包能力：能够处理各种类型的文件，并可以使用插件机制扩展。

  • 模块化支持：支持CommonJS、AMD、ES6等模块化规范，并支持异步加载模块。

  • 静态资源处理：支持对CSS、图片、字体等静态资源进行打包。

  • 代码分块：支持将业务代码和第三方代码进行分离，实现按需加载。

  • 开发调试工具：支持开发过程中的模块热替换，实现快速的开发调试。

安装

Webpack可以通过npm进行安装：

npm install webpack --save-dev
使用步骤

Webpack的使用步骤如下：

1. 创建项目并安装依赖
mkdir myapp && cd myapp
npm init -y
npm install webpack --save-dev
2. 创建配置文件

在项目根目录下创建一个webpack.config.js文件，并进行基本的配置：

module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 出口文件
    filename: 'bundle.js',
  },
};
3. 编写代码

在./src/index.js文件中，编写需要打包的代码：

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('Webpack');
4. 打包代码

使用npx运行webpack进行打包：

npx webpack

Webpack会根据配置文件进行打包，输出一个bundle.js文件，包含了整个程序代码的所有依赖。

5. 在浏览器中运行

打开./index.html文件，并在<script>标签中引入打包后的bundle.js文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack</title>
</head>
<body>
  <h1>Hello, Webpack!</h1>
  <script src="dist/bundle.js"></script>
</body>
</html>

在浏览器中打开index.html文件即可。

结语

Webpack是一款非常强大的打包工具，它可以帮助我们对多个 JavaScript 模块进行打包，以便于在浏览器中使用。如果你想学习 Webpack 的更多知识，可以查看官方文档。