Webpack 实践教程

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

以下是一些Webpack实践的关键步骤：

安装Webpack：首先需要安装Webpack。可以通过npm或yarn进行安装。
```
npm install --save-dev webpack webpack-cli
```
或者
```
yarn add --dev webpack webpack-cli
```

配置webpack.config.js：Webpack的核心配置文件是webpack.config.js。在这个文件中，你可以指定入口文件、输出文件、加载器(loader)和插件(plugin)等。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};

使用Loader：Webpack本身只能处理JavaScript文件，如果需要处理其他类型的文件，如CSS、图片等，需要使用Loader。
```
npm install --save-dev style-loader css-loader
```
然后在webpack.config.js中添加对应的Loader配置。
使用Plugin：Plugin可以扩展Webpack的功能。例如，HtmlWebpackPlugin可以自动生成HTML文件，并将bundle.js链接到HTML中。
```
npm install --save-dev html-webpack-plugin
```
然后在webpack.config.js中添加HtmlWebpackPlugin插件配置。
运行Webpack：在命令行中运行webpack命令，Webpack会根据配置文件打包你的应用程序。
```
npx webpack
```
测试：在浏览器中打开生成的dist目录下的index.html文件，查看Webpack打包的结果。

Webpack官方文档提供了更详细的信息和指南。