webpack.config.js 详解

简介

webpack 是一个现代化的前端静态资源打包工具，它可以将 JavaScript 模块化代码打包成静态资源，同时可以对静态资源进行优化、压缩等操作。在实际项目中，我们通常需要自定义 webpack 的配置，这就需要我们对 webpack.config.js 进行深入的了解。

webpack.config.js 重要配置项

以下是 webpack.config.js 常用配置项的详解：

entry

entry 是 webpack 打包的入口文件，可以是一个或多个文件或模块。它以对象的形式定义，每个 key-value 表示一个入口。

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  }
};

output

output 定义了打包后的静态资源存放路径和文件名。通常需要指定 path 属性和 filename 属性。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
  }
};

module

module 是处理模块的规则，具体包含了一个个的 loader，它们可以把各种文件类型转换成模块。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

plugins

plugins 定义了所有的插件，可以是一个或多个，每个插件都有特定的作用。

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ]
};

devServer

devServer 是一个轻量级的基于 node.js 的开发服务器，可以实时更新。

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

示例代码

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

思考与总结

本篇文章简要介绍了 webpack.config.js 的配置项，同时提供了一个实际项目的配置文件。在实际项目中，我们需要根据具体情况来自定义配置，比如说静态资源的分类和打包、代码的优化和压缩等等。希望本文能够为你深入了解 webpack 提供帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bb4e67d4982a6ebd9472c