Webpack 4入门实战：24 个实例手把手教您掌握

2023-12-25 11:23:25

Webpack 4 入门实战：24 个实例手把手教您掌握

Webpack 是一个现代前端构建工具，可以将多种类型的资源（如 JavaScript、CSS、图像等）打包成一个或多个优化后的文件，以便在浏览器中高效加载和执行。Webpack 4 是 Webpack 的最新版本，带来了许多新的特性和改进，使其成为构建现代前端应用程序的理想工具。

本文将通过 24 个实例，手把手教您掌握 Webpack 4 的核心概念和使用方法，从入门到实战，循序渐进，让您轻松掌握 Webpack 4 的精髓。

实例 1：基本配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

这个简单的 webpack 配置告诉 webpack 从 ./src/index.js 开始打包，并将打包后的文件输出到 ./dist/main.js。

实例 2：使用 loader

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

这个配置添加了一个 loader，用于将 CSS 文件转换成 JavaScript 模块，以便 webpack 可以将它们打包到最终的 JavaScript 文件中。

实例 3：使用插件

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

这个配置添加了一个插件，用于将 jQuery 库作为全局变量注入到最终的 JavaScript 文件中。

实例 4：代码分割

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: ['jquery'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

这个配置使用代码分割将应用程序分为两个部分：main.js 和 vendor.js。main.js 包含应用程序的主代码，而 vendor.js 包含第三方库，如 jQuery。这有助于减少初始加载时间，并提高应用程序的性能。

实例 5：使用 HMR

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    hot: true,
  },
};

这个配置添加了 Hot Module Replacement (HMR) 插件，它允许在保存更改时自动重新加载应用程序，而无需刷新页面。这对于开发和调试应用程序非常有用。

实例 6：性能优化

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
};

这个配置添加了 TerserPlugin，它是一个 JavaScript 代码压缩工具。这有助于减小最终 JavaScript 文件的大小，并提高应用程序的性能。

实例 7：Tree Shaking

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  optimization: {
    usedExports: true,
  },
};

这个配置启用了 Tree Shaking，它是一种优化技术，可以从最终 JavaScript 文件中删除未使用的代码。这有助于减小最终 JavaScript 文件的大小，并提高应用程序的性能。

实例 8：自定义 loader

const loader = require('./my-loader');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.my-file$/,
        use: loader,
      },
    ],
  },
};

这个配置添加了一个自定义 loader，用于处理具有 .my-file 扩展名的文件。自定义 loader 可以用于各种目的，例如编译、转换或压缩文件。

实例 9：自定义插件

const plugin = require('./my-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    plugin,
  ],
};

这个配置添加了一个自定义插件，用于执行特定任务。自定义插件可以用于各种目的，例如优化构建过程、生成报告或集成其他工具。

实例 10：配置多个入口点

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: ['jquery'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

这个配置使用多个入口点来构建应用程序。main 入口点包含应用程序的主代码，而 vendor 入口点包含第三方库，如 jQuery。这有助于组织代码并减少最终 JavaScript 文件的大小。

实例 11：配置多个输出

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
};

这个配置使用多个输出选项来构建应用程序。main.js 输出包含应用程序的主代码，MyLibrary 输出是一个通用模块定义 (UMD) 库，可以在多种环境中使用。

实例 12：使用别名

module.exports = {
  resolve: {
    alias: {
      'module.exports = {
  resolve: {
    alias: {
      '$': 'jquery',
      'my-module': './src/my-module.js',
    },
  },
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};
#x27;: 'jquery',
      'my-module': './src/my-module.js',
    },
  },
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

这个配置使用别名来缩短模块的名称。例如，$ 别名可以用来引用 jQuery 库，my-module 别名可以用来引用 ./src/my-module.js 文件。这有助于提高代码的可读性和可维护性。

实例 13：使用 externals

module.exports = {
  externals: {
    jquery: 'jQuery',
  },
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
};

这个配置使用 externals 选项来告诉 webpack 不要将某些模块打包到最终 JavaScript 文件中。例如，jquery 外部模块告诉 webpack 不要将 jQuery 库打包到最终 JavaScript 文件中，而是假设它已经存在于全局作用域中。这有助于减小最终 JavaScript 文件的大小，并提高应用程序的性能。