webpack 多入口配置与优化

前言

在现代化的前端开发中，webpack 已经成为了不可或缺的一部分。它可以帮助我们处理模块化、代码压缩、图片压缩等一系列的工作。在实际项目中，我们经常需要处理多个入口文件的情况，本文将介绍 webpack 多入口的配置和优化。

多入口配置

基本配置

在 webpack 中，我们可以通过配置 entry 来指定入口文件。如果需要处理多个入口文件，我们可以将 entry 配置成一个对象，其中每一个键值对代表一个入口文件。例如：

module.exports = {
  entry: {
    main: './src/main.js',
    login: './src/login.js'
  }
};

上面的配置将会生成两个入口文件，分别是 main.js 和 login.js。这些入口文件可以通过配置 output 来指定输出目录和文件名。例如：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    main: './src/main.js',
    login: './src/login.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

上面的配置将会生成两个输出文件，分别是 main.js 和 login.js，它们都会被输出到 dist 目录下。

HTML 模板处理

在实际项目中，我们通常需要将多个入口文件引入到不同的 HTML 页面中。我们可以通过使用 html-webpack-plugin 插件来实现这个功能。这个插件可以根据指定的模板来生成 HTML 文件，并自动将入口文件引入到 HTML 文件中。

首先，我们需要安装 html-webpack-plugin 插件：

npm install --save-dev html-webpack-plugin

然后，在 webpack 配置文件中配置插件：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main.js',
    login: './src/login.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      template: './src/login.html',
      filename: 'login.html',
      chunks: ['login']
    })
  ]
};

上面的配置将会生成两个 HTML 文件，分别是 index.html 和 login.html，它们都会被输出到 dist 目录下。其中，chunks 属性用于指定需要引入的入口文件。

CSS 处理

在实际项目中，我们通常需要将多个入口文件的 CSS 文件合并成一个文件，以减少 HTTP 请求次数。我们可以通过使用 extract-text-webpack-plugin 插件来实现这个功能。这个插件可以将 CSS 文件提取出来，并生成一个单独的 CSS 文件。

首先，我们需要安装 extract-text-webpack-plugin 插件：

npm install --save-dev extract-text-webpack-plugin

然后，在 webpack 配置文件中配置插件：

// www.javascriptcn.com code example
const ExtractTextPlugin = require('extract-text-webpack-plugin');

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

上面的配置将会生成两个 CSS 文件，分别是 main.css 和 login.css，它们都会被输出到 dist 目录下。

优化

CommonsChunkPlugin

在实际项目中，我们通常会使用第三方库，例如 jQuery、React 等。这些库通常在多个入口文件中都会被使用到，如果每个入口文件都打包一次这些库，那么就会导致文件体积变大，加载速度变慢。为了解决这个问题，我们可以使用 CommonsChunkPlugin 插件来将这些库提取出来，生成一个单独的文件。

首先，我们需要在 webpack 配置文件中配置 entry，将第三方库单独作为一个入口文件：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    main: './src/main.js',
    login: './src/login.js',
    vendor: ['jquery', 'react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

然后，在 webpack 配置文件中配置插件：

// www.javascriptcn.com code example
module.exports = {
  // ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    })
  ]
};

上面的配置将会生成一个名为 vendor.js 的文件，其中包含了 jquery、React 和 React-DOM 这三个库。该文件只会被加载一次，可以被多个入口文件共享。

UglifyJsPlugin

在实际项目中，我们通常需要对代码进行压缩，以减小文件体积，加快加载速度。我们可以使用 UglifyJsPlugin 插件来压缩代码。

首先，我们需要安装 UglifyJsPlugin 插件：

npm install --save-dev uglifyjs-webpack-plugin

然后，在 webpack 配置文件中配置插件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new UglifyJsPlugin()
  ]
};

上面的配置将会对代码进行压缩。

结语

本文介绍了 webpack 多入口的配置和优化，包括 HTML 模板处理、CSS 处理、CommonsChunkPlugin 和 UglifyJsPlugin。通过学习本文，你可以更好地处理多个入口文件的情况，优化项目的加载速度。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53901a941bf71349a7fd7