Webpack 构建工程最佳实践-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个打包工具，它可以将多个文件打包成一个文件，同时支持各种各样的模块化开发方式，是前端工程化必备的工具之一。本文将介绍 Webpack 构建工程的最佳实践。

安装 Webpack

使用 npm 安装

npm install webpack --save-dev

基本配置

在项目根目录下创建一个 webpack.config.js 文件，进行基本配置。

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出文件夹路径
  }
};

加载器

Webpack 通过加载器（Loader）支持在打包时处理各种类型的文件，将其转换为有效的模块，并添加到依赖图中。常用的加载器有：

babel-loader：用于转换 ES6+ 语法
css-loader：用于加载 CSS，同时支持模块化
file-loader：用于将文件移动到输出文件夹，并返回文件路径
url-loader：类似 file-loader，但可以判断图片大小，将小图片转换为 base64 格式

前置安装：

npm install --save-dev babel-loader css-loader file-loader url-loader

在配置文件中使用加载器：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

插件

Webpack 插件（Plugin）可以在打包过程中完成更多的任务，例如生成 HTML 文件、压缩代码、提取公共模块等。常用的插件有：

html-webpack-plugin：生成 HTML 文件，并自动引入打包后的文件
css-minimizer-webpack-plugin：压缩 CSS 代码
terser-webpack-plugin：压缩 JavaScript 代码
clean-webpack-plugin：清空输出文件夹
webpack-bundle-analyzer：生成打包分析报告

前置安装：

npm install --save-dev html-webpack-plugin css-minimizer-webpack-plugin terser-webpack-plugin webpack-bundle-analyzer clean-webpack-plugin

在配置文件中使用插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CssMinimizerPlugin(),
    new TerserPlugin(),
    new CleanWebpackPlugin(),
    new BundleAnalyzerPlugin()
  ],
};

模块别名

Webpack 支持以别名的形式引入模块，例如：

import { login } from '@/api/user.js';

在配置文件中定义别名：

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

热更新

热更新（Hot Module Replacement）是指在不刷新整个页面的情况下，替换已经更新的模块。使用 Webpack 实现热更新，需要使用 webpack-dev-server 和 webpack-hot-middleware。

前置安装：

npm install --save-dev webpack-dev-server webpack-hot-middleware

在配置文件中进行配置：

const webpack = require('webpack');

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

构建环境分离

在不同的环境中，我们需要使用不同的配置，例如生产环境下需要启用代码压缩和文件哈希值。可以使用 webpack-merge 插件将公共配置和环境配置进行合并，实现构建环境分离。

前置安装：

npm install --save-dev webpack-merge

创建公共配置文件 webpack.common.js：

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

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: '[name].[hash].js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出文件夹路径
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

创建开发环境配置文件 webpack.dev.js：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  }
});

创建生产环境配置文件 webpack.prod.js：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin()
    ]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});

使用时，可以通过不同的命令启动不同的环境：

webpack --config webpack.dev.js
webpack --config webpack.prod.js

总结

本文介绍了 Webpack 构建工程的最佳实践，包括基本配置、加载器、插件、模块别名、热更新和构建环境分离。希望能对大家有所帮助。完整代码可在 Github 上查看。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a25c9dadd4f0e0ffa7e5ef

Webpack 构建工程最佳实践

安装 Webpack

基本配置

加载器

插件

模块别名

热更新

构建环境分离

总结

纠错反馈