webpack教程

Webpack是一个静态模块打包工具，它可以将多个模块打包成一个文件，用于浏览器端的使用。下面是一个简单的Webpack教程，帮助你入门Webpack。

安装Webpack

首先，你需要在本地安装Webpack。可以使用npm进行安装，命令如下：

npm install webpack --save-dev

创建Webpack配置文件

接下来，你需要创建一个Webpack配置文件。在项目根目录下创建一个名为webpack.config.js的文件，代码如下：

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

这个配置文件指定了Webpack的入口文件（src/index.js）和输出文件（dist/bundle.js）。

创建模块

接下来，你需要创建一些模块，用于Webpack打包。在src目录下创建两个模块，分别为math.js和index.js。math.js模块代码如下：

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

index.js模块代码如下：

import { add, subtract } from './math';

console.log(add(1, 2));
console.log(subtract(5, 3));

这个模块使用了math.js中的两个函数。

打包模块

现在，你可以使用Webpack打包模块了。在命令行中运行下面的命令：

webpack

Webpack会根据配置文件中指定的入口文件和输出文件，打包模块，并将打包后的文件保存到dist/bundle.js中。

运行打包后的文件

最后，你可以在浏览器中运行打包后的文件了。在项目根目录下创建一个名为index.html的文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Tutorial</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

这个文件引入了打包后的文件。

现在，你可以在浏览器中打开index.html文件，查看控制台输出，验证打包后的文件可以正常运行。

这就是一个简单的Webpack教程。Webpack还有很多高级特性和配置选项，建议你深入学习Webpack，以充分利用它的强大功能。