webpack高级特性

sym001
123 阅读5分钟

本篇汇总 webpack高级特性相关知识点，包含：多入口、抽离&压缩css文件、抽离公共代码、懒加载、处理React和vue、常见loader和plugin。内容不是很多，但是各个都是日常项目中必须要配置的功能。

一、多入口

Webpack支持多入口的打包，这使得我们可以将多个模块打包成多个bundle文件，以便在不同的页面中使用不同的JS文件。下面是一个简单的多入口配置示例：

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

在上面的配置中，我们定义了两个入口文件：page1.js和page2.js，它们将被打包成page1.bundle.js和page2.bundle.js两个文件。同时，我们还使用了[name]占位符，它会被替换成入口文件的名称。

在这种情况下，Webpack会为每个入口文件生成一个独立的bundle文件，这些文件可以在不同的页面中使用。如果我们需要将公共的代码提取到一个单独的文件中，可以使用CommonsChunkPlugin插件，将公共模块打包成一个单独的文件。下面是一个简单的配置示例：

const webpack = require('webpack');

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common'
    })
  ]
};

在上面的配置中，我们使用了CommonsChunkPlugin插件，将公共模块打包成一个单独的文件，文件名为common.bundle.js。这样，我们就可以在不同的页面中使用这个公共文件了。

二、抽离&压缩css文件

1、抽离

抽离CSS文件是Webpack中的一个常见需求，因为将CSS文件单独抽离出来可以使得页面更快地加载，并且可以方便地进行样式的修改和维护。

在Webpack中，可以使用ExtractTextWebpackPlugin插件来抽离CSS文件。具体步骤如下：

  1. 安装ExtractTextWebpackPlugin插件：
npm install extract-text-webpack-plugin --save-dev

2. 在Webpack配置文件中引入插件：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

3. 配置插件：

module.exports = {
  // ...
  plugins: [
    new ExtractTextPlugin('styles.css')
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  }
};

在上面的配置中，我们首先在plugins中引入了ExtractTextPlugin插件，并指定了要抽离的CSS文件名为styles.css。然后在module.rules中配置了对CSS文件的处理规则，其中使用了ExtractTextPlugin.extract方法来将CSS文件抽离出来。

需要注意的是，这里我们使用了两个loader：style-loader和css-loader。其中，style-loader会将CSS文件插入到HTML页面中的<style>标签中，而css-loader则会将CSS文件转换为JavaScript模块，以便Webpack可以将其打包进最终的JavaScript文件中。

2、压缩

压缩CSS文件也是Webpack中的一个常见需求，因为压缩CSS文件可以减小文件大小，从而加速页面加载速度。在Webpack中，可以使用css-loader的minimize选项来压缩CSS文件。

具体步骤如下：

  1. 安装css-loader和optimize-css-assets-webpack-plugin插件：
npm install css-loader optimize-css-assets-webpack-plugin --save-dev

2. 在Webpack配置文件中引入插件：

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

3. 配置插件：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new OptimizeCssAssetsPlugin()
  ]
};

在上面的配置中，我们首先在module.rules中配置了对CSS文件的处理规则，其中使用了css-loader的minimize选项来压缩CSS文件。然后在plugins中引入了OptimizeCssAssetsPlugin插件来对CSS文件进行压缩。

需要注意的是，如果你使用了ExtractTextWebpackPlugin插件来抽离CSS文件，那么你需要在配置插件时将minimize选项设置为true，以便对抽离出来的CSS文件进行压缩。

三、抽离公共代码

Webpack提供了多种方式来抽离公共代码。其中最常用的方式是使用SplitChunksPlugin插件。

SplitChunksPlugin插件可以将多个入口chunk中的公共代码提取到单独的chunk中，避免代码重复，减小打包后的文件大小，提高页面加载速度。

在Webpack 4中，SplitChunksPlugin插件已经默认开启，不需要手动配置。但是，我们可以通过配置optimization选项来进一步优化代码分离。

下面是一个简单的配置示例：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

上面的配置将会把所有的公共代码提取到一个名为vendors~main.js的chunk中，并且只有当公共代码大小超过30KB时才会进行代码分离。同时，Webpack还会自动将所有来自node_modules目录下的模块打包到vendors组中。

除了使用SplitChunksPlugin插件，Webpack还提供了其他的代码分离方式，例如使用DllPlugin和DllReferencePlugin插件来提前编译第三方库，以及使用CommonsChunkPlugin插件来抽离公共代码。但是，这些方式在Webpack 4中已经不再推荐使用，建议使用SplitChunksPlugin插件来进行代码分离。

四、懒加载

Webpack是一个模块打包器，它可以将多个模块打包成一个文件，以便于浏览器加载。Webpack有很多高级特性，其中懒加载就是其中之一。

懒加载是指在需要使用某个模块时才去加载它，而不是在页面加载时就把所有模块都加载进来。这样可以减少页面的加载时间和网络带宽的占用。

Webpack支持懒加载，可以使用import()函数来实现。例如：

import('./module.js').then(module => {
  // 使用module
});

在这个例子中，当需要使用module.js模块时，才会去加载它。import()函数返回一个Promise对象，当模块加载完成后，才会执行then()方法中的回调函数。

懒加载还可以结合React的Suspense组件来使用，这样可以在加载模块时显示一个占位符，让用户知道正在加载。例如：

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./module.js'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

在这个例子中，当LazyComponent组件需要使用module.js模块时，才会去加载它。同时，Suspense组件会显示一个占位符，直到模块加载完成后再显示LazyComponent组件。

五、处理React和Vue

Webpack是React和Vue等前端框架的常用打包工具，它可以将React和Vue的代码打包成一个或多个文件，以便于浏览器加载。以下是Webpack处理React和Vue的高级特性：

  1. React的JSX处理

React使用JSX语法来描述组件的UI，Webpack需要使用Babel来处理JSX代码。Babel是一个JavaScript编译器，它可以将ES6、JSX等高级语法转换成ES5语法，以便于浏览器兼容。在Webpack中，需要安装babel-loader和@babel/preset-react两个包，并在Webpack配置文件中进行配置，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};

2. Vue的单文件组件处理

Vue使用单文件组件（.vue文件）来描述组件的UI、逻辑和样式，Webpack需要使用vue-loader来处理单文件组件。vue-loader是一个Webpack插件，它可以将单文件组件转换成JavaScript代码，并将样式转换成CSS代码。在Webpack中，需要安装vue-loader和vue-template-compiler两个包，并在Webpack配置文件中进行配置，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  }
};

以上是Webpack处理React和Vue的高级特性，通过这些特性可以更好地处理React和Vue的代码，并提高应用程序的性能和可维护性。

avatar
文章
阅读
粉丝