Developer/Frameworks/JavaScript/Tools/Webpack/Tutorial

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

安装 Webpack

首先，您需要在项目中安装 Webpack。可以通过 npm 或 yarn 来安装：

npm install --save-dev webpack webpack-cli

或者

yarn add webpack webpack-cli

配置文件

Webpack 需要一个配置文件来告诉它如何处理应用程序中的模块。默认情况下，Webpack 会查找一个名为 webpack.config.js 的文件。

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 中添加以下配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

使用插件

Webpack 插件（plugins）可以用于执行各种任务，如打包优化、资源管理和环境变量注入等。

npm install --save-dev html-webpack-plugin

在 webpack.config.js 中添加以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

开发服务器

为了方便开发，可以使用 Webpack 的开发服务器（Webpack Dev Server）。

npm install --save-dev webpack-dev-server

在 package.json 中添加以下脚本：

"scripts": {
  "start": "webpack serve"
}

现在，您可以通过访问 http://localhost:8080 来查看您的应用程序。

了解更多关于 Webpack 的配置和优化

Webpack 图标