webpack,五大模块

1. 入口（entry）配置
   • 概念：入口起点是 Webpack 构建依赖图的开始。它告诉 Webpack 应该从哪个模块开始构建，并将其作为入口点，然后递归地解析和加载所有相关的模块。
   • 实际配置示例 - 单入口应用：
     • 如果是一个简单的 JavaScript 应用，假设项目结构如下：
       • src
         • index.js（主入口文件）
         • other.js（被index.js引用的文件）
     • 在webpack.config.js（假设这是 Webpack 配置文件）中的entry配置可以是：

     module.exports = {entry: './src/index.js'};

• 实际配置示例 - 多入口应用（例如多页面应用）：
  • 假设项目结构如下：
    • src
      • page1
        • index.js
      • page2
        • index.js
  • webpack.config.js中的entry配置可以是：

     module.exports = {entry: {page1: './src/page1/index.js',page2: './src/page2/index.js'}};

• 这样配置后，Webpack 会为page1和page2分别构建独立的依赖图，最终可以生成多个打包后的文件，用于多页面应用的不同页面。

1. 输出（output）配置
   • 概念：输出配置告诉 Webpack 如何处理和输出构建后的文件。包括文件名、路径等重要信息。
   • 实际配置示例 - 基本配置：
     • 继续上面单入口应用的例子，配置output如下：

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

• 这里filename定义了输出文件的名称为main.js，path使用path.resolve方法确定了输出目录为项目根目录下的dist文件夹（__dirname表示当前配置文件所在的目录）。
• 实际配置示例 - 多入口输出配置：
  • 对于前面多入口的例子，output可以这样配置：

     const path = require('path');module.exports = {entry: {page1: './src/page1/index.js',page2: './src/page2/index.js'},output: {filename: '[name].js',path: path.resolve(__dirname, 'dist')}};

• 这里filename中的[name]是一个占位符，它会被entry对象中的键（page1和page2）替换，这样就会分别输出page1.js和page2.js到dist目录。

1. 解析器（loader）配置
   • 概念：Webpack 本身只能理解 JavaScript 和 JSON 文件。Loader 让 Webpack 能够处理其他类型的文件，并将它们转换为有效的模块，这些模块可以添加到依赖图中。例如，将 CSS 文件转换为 JavaScript 模块，或者将 ES6/ES7 语法的 JavaScript 文件转换为浏览器可执行的 ES5 语法文件。
   • 实际配置示例 - 处理 CSS 文件：
     • 假设要在 JavaScript 中导入 CSS 文件，首先需要安装style - loader和css - loader：

     npm install style-loader css-loader - - save - dev

• 然后在webpack.config.js中配置loader：

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

• 这里rules是一个数组，每个规则对象有test属性（用于匹配文件类型，这里是匹配.css文件）和use属性（指定使用的loader，顺序很重要，从右到左执行，先css - loader处理 CSS 文件，然后style - loader将 CSS 添加到 DOM 中）。
• 实际配置示例 - 处理 ES6+ JavaScript 文件：
  • 安装babel - loader以及相关的 Babel 预设（例如@babel/preset - env）：
• 配置loader：

     module.exports = {//...其他配置module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset - env']}}}]}};

• 这里test匹配.js文件，exclude排除node_modules目录（通常不希望对这些已经编译好的模块再次编译），use中的babel - loader用于处理文件，并且通过options指定了 Babel 预设来转换 ES6 + 语法。

1. 插件（plugin）配置
   • 概念：插件用于执行范围更广的任务，比如打包优化、资源管理、注入环境变量等。与loader专注于转换特定类型的模块不同，插件可以在 Webpack 构建过程的各个阶段介入。
   • 实际配置示例 - HtmlWebpackPlugin（自动生成 HTML 文件并注入打包后的脚本）：
     • 安装html - webpack - plugin：

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

• 配置插件：

     const HtmlWebpackPlugin = require('html - webpack - plugin');module.exports = {//...其他配置plugins: [new HtmlWebpackPlugin({title: 'My App',template: './src/index.html',filename: 'index.html'})]};

• 这个插件会根据template指定的 HTML 模板文件（这里是src/index.html）生成一个新的 HTML 文件（filename指定为index.html），并且会自动将打包后的脚本（如main.js）注入到生成的 HTML 文件中，title属性用于设置 HTML 文档的标题。
• 实际配置示例 - CleanWebpackPlugin（清理输出目录）：
  • 安装clean - webpack - plugin：

     npm install clean - webpack - plugin - - save - dev

• 配置插件：

     const {CleanWebpackPlugin} = require('clean - webpack - plugin');module.exports = {//...其他配置plugins: [new CleanWebpackPlugin()]};

• 这个插件会在每次构建前清理output配置中指定的输出目录（如dist目录），确保没有旧的文件残留，使得每次构建的输出都是最新的。

1. 模式（mode）配置
   • 概念：模式是 Webpack 4 引入的一个重要配置选项，它可以设置为development或production，用于告诉 Webpack 针对不同的环境进行优化。development模式注重开发体验，提供详细的错误信息和调试支持；production模式注重优化打包后的文件大小和性能。
   • 实际配置示例：

     module.exports = {mode: 'production'//...其他配置};

• 或者

     module.exports = {mode: 'development'//...其他配置};

• 当设置为production模式时，Webpack 会自动启用一些优化，如代码压缩、模块标识符简化等。在development模式下，这些优化通常不会启用，以便于开发和调试。例如，在production模式下，生成的 JavaScript 文件会被压缩，变量名会被缩短，而在development模式下，代码更接近原始的编写形式，方便查看错误和调试。