适合新手的 webpack 5 实战演练

2023-11-18 15:27:24

webpack 初探

webpack 是一种模块打包工具，用于将 JavaScript 模块打包成可部署的资产。它提供了一系列功能，包括代码拆分、代码优化、代码压缩和依赖项管理。

实战演练

安装 webpack

npm install --save-dev webpack webpack-cli

创建配置文件

在项目根目录下创建 webpack.config.js 文件：

const path = require('path');

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

编译项目

npx webpack

这将生成一个 main.js 文件，包含打包后的 JavaScript 代码。

高级技术

代码拆分

代码拆分允许将代码拆分成更小的模块，以便按需加载。在 webpack.config.js 中使用 optimization.splitChunks 选项配置：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /node_modules/,
        chunks: 'initial',
        name: 'vendor',
        enforce: true
      }
    }
  }
}

插件

插件可以扩展 webpack 的功能。例如，HtmlWebpackPlugin 插件可以自动生成一个包含打包后的代码的 HTML 文件：

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

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