Webpack 4 用法指南（上）

Webpack 4 是一个现代 JavaScript 应用程序的打包工具。它可以将许多小的 JavaScript 模块组合成一个或多个更大的捆绑文件。这可以提高加载速度，减少 HTTP 请求的数量，并使您的应用程序更易于维护。

在本文中，我们将逐步引导您正确地使用 Webpack 4。我们将首先介绍 Webpack 的基本概念，然后我们将向您展示如何配置 Webpack、使用 Webpack 插件、打包您的应用程序以及优化您的捆绑文件。

Webpack 的基本概念

Webpack 是一个模块打包器。这意味着它可以将许多小的 JavaScript 模块组合成一个或多个更大的捆绑文件。这可以提高加载速度，减少 HTTP 请求的数量，并使您的应用程序更易于维护。

Webpack 使用配置文件来告诉它如何打包您的应用程序。配置文件通常称为 webpack.config.js。在配置文件中，您可以指定要打包的模块、要使用的插件以及捆绑文件的输出位置。

Webpack 有许多可用的插件。这些插件可以帮助您完成各种任务，例如压缩您的代码、添加源映射或将样式文件转换为 CSS 代码。

Webpack 将您的应用程序打包成一个或多个捆绑文件。这些捆绑文件通常是 JavaScript 文件，但也可以是 CSS 文件或其他类型的文件。

如何配置 Webpack

要配置 Webpack，您需要创建一个 webpack.config.js 文件。这个文件可以放在您的项目根目录下。

在 webpack.config.js 文件中，您可以指定以下内容：

• 要打包的模块
• 要使用的插件
• 捆绑文件的输出位置

以下是一个简单的 webpack.config.js 文件示例：

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  }
};

在这个示例中，我们告诉 Webpack 要打包 ./src/index.js 文件，并将捆绑文件输出到 ./dist/bundle.js 文件。

如何使用 Webpack 插件

Webpack 有许多可用的插件。这些插件可以帮助您完成各种任务，例如压缩您的代码、添加源映射或将样式文件转换为 CSS 代码。

要使用 Webpack 插件，您需要在 webpack.config.js 文件中安装并配置它们。

以下是如何安装 Webpack 插件的示例：

npm install webpack-plugin --save-dev

以下是如何在 webpack.config.js 文件中配置 Webpack 插件的示例：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

在这个示例中，我们安装了 webpack-plugin 插件，并在 webpack.config.js 文件中配置它。这个插件将压缩我们的代码。

如何打包您的应用程序

要打包您的应用程序，您需要运行以下命令：

webpack

这将使用您在 webpack.config.js 文件中指定的配置来打包您的应用程序。

打包完成后，您可以在 ./dist 文件夹中找到您的捆绑文件。

如何优化您的捆绑文件

Webpack 有许多方法可以优化您的捆绑文件。这些方法包括：

• 使用代码分割
• 使用树摇动
• 压缩您的代码
• 使用源映射

以下是如何使用代码分割的示例：

import('./module1').then(module1 => {
  // 使用 module1
});

import('./module2').then(module2 => {
  // 使用 module2
});

在这个示例中，我们使用代码分割将我们的应用程序分成两个模块。这将允许我们只加载应用程序的必要部分。

以下是如何使用树摇动的示例：

import { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

export default MyComponent;

在这个示例中，我们使用树摇动将 React 库中未使用的部分从我们的应用程序中删除。这将使我们的捆绑文件更小。

以下是如何压缩您的代码的示例：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

在这个示例中，我们使用 webpack-uglify-js-plugin 插件来压缩我们的代码。这将使我们的捆绑文件更小。

以下是如何使用源映射的示例：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  devtool: 'source-map'
};

在这个示例中，我们使用 devtool 选项来启用源映射。这将允许您在浏览器中调试您的代码。