webpack打包教程

Webpack是一个流行的JavaScript模块打包工具，它能够将项目中的静态资源（如CSS、图片、JS等）打包成单个或多个优化后的文件，以便于性能优化和部署。下面是简要的webpack入门教程：

1. **安装Webpack**：首先，你需要全局安装Node.js，然后通过npm（Node Package Manager）安装webpack。运行`npm install -g webpack webpack-cli`。

2. **创建配置文件**：在你的项目根目录下，创建一个名为`webpack.config.js`的文件，这是Webpack的核心配置文件，用于指定打包规则。

3. **基本配置示例**：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口点
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出路径
  },
};

4. **加载器和插件**：Webpack内置了多种加载器，如`file-loader`处理非JavaScript文件，`css-loader`处理CSS。你可以添加更多的加载器来处理其他类型的资源。同时，插件如`HtmlWebpackPlugin`可以生成HTML模板并引用打包后的文件。

5. **运行Webpack**：在命令行中，输入`npx webpack`或`webpack --watch`（后者会实时监听源文件变化并自动打包）开始构建。

6. **理解工作流程**：Webpack的工作原理是先解析入口文件，识别其中的依赖，然后对每个依赖进行模块化处理，并将其连接在一起生成一个或多个输出文件。