Webpack 指南

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当运行 webpack 时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

以下是一些关于 Webpack 的基本概念和用法：

基本概念

入口（Entry）: 指示 webpack 应该使用哪个模块作为项目的入口点。
输出（Output）: 指定输出文件的名称和路径。
加载器（Loaders）: 用于将非 JavaScript 文件转换为可利用的模块。
插件（Plugins）: 在 webpack 的构建过程中进行扩展的模块。

快速开始

初始化项目：在你的项目目录中运行 npm init 来创建一个 package.json 文件。
安装 webpack：在项目中运行 npm install --save-dev webpack webpack-cli。
创建入口文件：创建一个 index.js 文件作为入口点。
配置 webpack：创建一个 webpack.config.js 文件来配置 webpack。
运行 webpack：在命令行中运行 npx webpack。

示例配置

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

扩展阅读

想要了解更多关于 Webpack 的信息，可以阅读官方文档：Webpack 官方文档。