webpack静态打包

Webpack可以用于静态资源的打包，以下是静态资源打包的一般步骤：

1. 安装Webpack和相关的Loader和Plugin，例如style-loader、css-loader、file-loader等。

2. 在项目中创建一个Webpack配置文件，命名为webpack.config.js。

3. 在Webpack配置文件中定义入口文件和输出文件。入口文件是指Webpack打包的起点文件，输出文件是指Webpack打包后生成的文件。

4. 配置Webpack的Loader和Plugin，指定Webpack如何处理不同类型的静态资源，例如CSS文件、图片文件等。

5. 运行Webpack命令进行打包，生成输出文件。

一个简单的Webpack配置文件示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

在这个配置文件中，我们定义了入口文件为src/index.js，输出文件为dist/bundle.js。同时，我们定义了两个Loader规则，分别用于处理CSS文件和图片文件。

运行Webpack命令进行打包：

webpack --mode production

这个命令会以生产模式运行Webpack，并生成打包后的文件。打包后的文件会存放在dist目录下，文件名为bundle.js。