webpack入门必备（二）：优化配置

2023-10-23 22:13:41

加快构建速度

1. exclude、include范围

webpack默认情况下会对src目录下所有文件进行打包，但有些文件是不需要打包的，例如node_modules目录下的文件，我们可以使用exclude来排除这些文件。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules目录下的文件
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

同理，我们也可以使用include来指定需要打包的文件。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /src/, // 只打包src目录下的文件
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

2. noParse

noParse选项可以告诉webpack不要解析某些模块，这可以加快构建速度。例如，我们可以告诉webpack不要解析moment.js，因为我们已经知道它是一个没有依赖项的模块。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /moment\.js$/,
        noParse: true
      }
    ]
  }
};

3. IgnorePlugin

IgnorePlugin可以忽略某些模块，这与noParse类似，但它不局限于模块。例如，我们可以使用IgnorePlugin来忽略一个文件或一个目录。

// webpack.config.js
const IgnorePlugin = require('webpack-ignore-plugin');

module.exports = {
  // ...
  plugins: [
    new IgnorePlugin(/^\.\/locale$/, /moment$/) // 忽略locale目录和moment模块
  ]
};

优化输出

1. tree shaking

tree shaking是webpack的一个特性，它可以自动删除未使用的代码。这可以减小构建后的文件大小，并加快加载速度。

tree shaking默认情况下是启用的，但我们也可以通过配置来显式启用它。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true // 启用tree shaking
  }
};

2. uglifyjs-webpack-plugin

uglifyjs-webpack-plugin可以对构建后的代码进行压缩，这可以进一步减小文件大小，并加快加载速度。

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            // ...
          },
          mangle: {
            // ...
          }
        }
      })
    ]
  }
};

3. DefinePlugin

DefinePlugin可以定义一些全局变量，这些变量可以在代码中使用。这可以减少代码的大小，并加快加载速度。

// webpack.config.js
const DefinePlugin = require('webpack').DefinePlugin;

module.exports = {
  // ...
  plugins: [
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production') // 定义一个全局变量
    })
  ]
};

4. ProvidePlugin

ProvidePlugin可以提供一些全局变量，这些变量可以在代码中使用。这与DefinePlugin类似，但它不需要显式地定义变量。

// webpack.config.js
const ProvidePlugin = require('webpack').ProvidePlugin;

module.exports = {
  // ...
  plugins: [
    new ProvidePlugin({
      '// webpack.config.js
const ProvidePlugin = require('webpack').ProvidePlugin;

module.exports = {
  // ...
  plugins: [
    new ProvidePlugin({
      '$': 'jquery', // 提供一个全局变量
      'jQuery': 'jquery' // 提供一个全局变量
    })
  ]
};
#x27;: 'jquery', // 提供一个全局变量
      'jQuery': 'jquery' // 提供一个全局变量
    })
  ]
};