webpack4 从零学习常用配置(小结)

我来详细讲解一下“webpack4 从零学习常用配置(小结)”的完整攻略。

简介

webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，使用起来非常灵活，比如可以将多个 JavaScript 文件打包成一个，或者将多个 CSS 文件打包成一个等。本文主要讲解 webpack4 的常用配置。

安装 webpack

首先需要安装 webpack 和 webpack-cli：

npm install webpack webpack-cli --save-dev

webpack 4.x 版本之后不再需要全局安装 webpack。

配置文件 webpack.config.js

webpack 的配置文件是一个名为 webpack.config.js 的 JavaScript 文件，它可以通过 module.exports 暴露配置，webpack 会自动读取该文件中的配置信息并进行打包操作。

以下配置为一个简单的 webpack 配置文件示例：

const path = require('path');

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

entry：指定打包的入口文件，可以是一个字符串或者是对象（多入口）。
output：指定打包后输出的文件名和目录。
path：指定打包后文件的输出路径。
filename：指定打包后的文件名。

加载器 loader

webpack 的加载器可以处理除 JavaScript 之外的其他文件格式，如 CSS、图片等，使其能够被打包到最终的文件中。

以下是一个简单 css-loader 配置的示例：

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

test：用于匹配需要使用该 loader 转换的文件类型，可以是正则表达式。
use：使用哪些 loader 进行转换，使用数组进行配置。loader 的顺序是从右向左执行的。

插件 plugin

webpack 的插件可以对打包过程进行优化、资源管理和注入环境变量等操作。

以下配置展示了如何使用 HTMLWebpackPlugin 插件生成 HTML 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

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