【干货】Webpack项目场景下的入口与出口最佳实践🛠️

在实际项目中，根据不同的应用场景，入口和出口的配置也会有所不同。下面是一些经典场景的最佳实践。

1. 一个页面一个 JS

适用于页面之间的功能差异巨大、公共代码较少的情况。这种情况下打包出来的最终代码不会有太多重复。

源码结构

|—— src
    |—— pageA   页面A的代码目录
        |—— index.js 页面A的启动模块
        |—— ...
    |—— pageB   页面B的代码目录
        |—— index.js 页面B的启动模块
        |—— ...
    |—— pageC   页面C的代码目录
        |—— main1.js 页面C的启动模块1 例如：主功能
        |—— main2.js 页面C的启动模块2 例如：实现访问统计的额外功能
        |—— ...
    |—— common  公共代码目录
        |—— ...

webpack 配置

const path = require('path');

module.exports = {
  entry: {
    pageA: './src/pageA/index.js',
    pageB: './src/pageB/index.js',
    pageC: ['./src/pageC/main1.js', './src/pageC/main2.js']
  },
  output: {
    filename: '[name].[chunkhash:5].js',
    path: path.resolve(__dirname, 'dist')
  }
};

2. 一个页面多个 JS

适用于页面之间有一些独立、相同的功能，专门使用一个 chunk 抽离这部分 JS 有利于浏览器更好地缓存这部分内容。

源码结构

|—— src
    |—— pageA   页面A的代码目录
        |—— index.js 页面A的启动模块
        |—— ...
    |—— pageB   页面B的代码目录
        |—— index.js 页面B的启动模块
        |—— ...
    |—— statistics   用于统计访问人数功能目录
        |—— index.js 启动模块
        |—— ...
    |—— common  公共代码目录
        |—— ...

webpack 配置

const path = require('path');

module.exports = {
  entry: {
    pageA: './src/pageA/index.js',
    pageB: './src/pageB/index.js',
    statistics: './src/statistics/index.js'
  },
  output: {
    filename: '[name].[chunkhash:5].js',
    path: path.resolve(__dirname, 'dist')
  }
};

思考：为什么不使用多启动模块的方式？

3. 单页应用（SPA）

单页应用（Single Page Application）是指整个网站（或网站的某一个功能块）只有一个页面，页面中的内容全部靠 JS 创建和控制。Vue 和 React 都是实现单页应用的利器。

源码结构

|—— src
    |—— subFunc   子功能目录
        |—— ...
    |—— subFunc   子功能目录
        |—— ...
    |—— common  公共代码目录
        |—— ...
    |—— index.js

webpack 配置

const path = require('path');

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

其他最佳实践

1. 使用 SplitChunksPlugin 优化公共代码

SplitChunksPlugin 可以帮助你提取公共代码，减少重复代码的打包。

const path = require('path');
const { optimization } = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].[contenthash:5].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

2. 使用 DefinePlugin 替换变量

DefinePlugin 可以在编译时替换变量，方便在不同环境下使用不同的配置。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.[hash:5].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

3. 使用 CleanWebpackPlugin 清理输出目录

CleanWebpackPlugin 可以在每次构建前清理输出目录，确保没有残留文件。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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

总结

通过本课程，你已经了解了不同场景下入口和出口的最佳实践，以及如何使用一些常用的插件来优化构建过程。合理配置入口和出口可以提高项目的可维护性和性能。