Webpack构建工具

1 概述

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。

它的主要作用是将多个松散的模块，包括 JavaScript、CSS、图片、字体等资源，按照指定的规则和依赖关系打包成一个或多个优化后的静态资源文件，以便在浏览器中高效加载和运行。

2 使用Webpack步骤

初始化node项目 npm init -y
下载webpack 的依赖包 npm install webpack webpack-cli --save-dev
创建目标index.js src/index.js ，在入口文件中编写需要使用的代码，包括引入相应的模块
使用webpack 指令，观察打包后生成的文件 .默认是dist/main.js

3 Webpack的配置文件

webpack

webpack的配置文件为webpack.config.js

js 复制代码

const path = require('path');

// 这个是webpack构建工具的配置文件 是由node来管理的，因此需要遵循nodejs(CommonJS)的规范。将暴露一个配置对象
module.exports =
{
  // 环境，production[开发模式] development[生产模式] 
  mode: "production",
  entry: './src/my_index.js',
  /*
  入口文件 ，默认是在src/index.js,也可以指定到别的入口文件。不建议修改入口文件【约定优于配置】
   */
  //entry: './path/to/my/entry/file.js',
  // entry: ['./src/1.js', './src/2.js'] //当存在多个入口文件时，也可以配置多个路径，此时entry 是一个数组
  // entry: {
  //   a: "./src/1.js",
  //   b: "./src/2.js"
  // }  //当存在多个入口文件时，也可以配置多个路径，此时entry 是一个对象，对象中可以通过键值对的方式去定义多个入口文件

  /**
   * output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
   */
  output: {
    // 声明在打包文件时是否先清空输出文件夹下的文件。默认是false 不清空的，这里一般建议设定成清空数据
    clean: true,
    // 声明webpack打包后的文件名称
    filename: 'bundle.js',
    //声明webpack打包的目录 ，需要清楚，这个必须使用绝对路径
    path: path.resolve(__dirname, 'destination')
  },


  /**
   * loader 用于对模块的源代码进行转换。转换成webpack工具能处理的js代码【如css-js 资源文件-js less-js】
   * 在使用其他类型的文件时[非js]，需要在入口文件中引入相应的资源.
   * rules 是一个数组对象，每个数组将包含一个源代码处理规则
   * 
   * 以处理css 文件为例
   * 1 需要使用到css-loader style-loader   npm install css-loder css-style-loader --save-dev
   * 
   */
  module: {
    rules: [
      {
        //正则表达式去匹配.css文件 忽略大小写
        test: /\.css$/i,
        //loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。
        use: ['style-loader', 'css-loader']
      },
      {
        //正则表达式去匹配图片资源
        test: /\.(png|jpg|gif)$/i,
        /**
         * 在 Webpack 中，url-loader 和 file-loader 都用于处理文件资源，特别是图片、字体等文件，但它们的作用稍有不同：
         * url-loader：
         * 当文件大小小于指定的阈值（通过 limit 选项设置）时，它会将文件转换为 Data URL 并嵌入到生成的 JavaScript 或 CSS 代码中（文件size小于设定的值时会转成base64位字符串）。这样可以减少 HTTP 请求数量，提高页面加载性能，尤其对于小文件非常有用。
         * 当文件大小超过阈值时，它的行为类似于 file-loader，将文件输出到指定的目录，并返回文件的 URL 。
         * file-loader：主要用于将文件输出到指定的目录，并返回文件的最终 URL 。
         */
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192, // 如果图片大小小于 8KB，将其转换为 DataURL 嵌入到代码中，否则单独输出文件
            name: 'images/[name].[ext]' // 输出文件的路径和文件名格式
          }
        }]
      }
    ],
  },
}

4 babel-loader 去转换js

以下是 ES6 规范中的一些主要特性：

let 和 const 关键字：提供了块级作用域的变量声明方式，增强了变量作用域的控制。

箭头函数：一种更简洁的函数定义方式，并且具有词法作用域的 this 值。

模板字符串：使用反引号（`）来定义字符串，可以方便地进行字符串插值。

解构赋值：可以从数组或对象中提取值并将其赋给变量。

默认参数：函数参数可以设置默认值。

剩余参数和扩展运算符：方便处理函数参数和数组/对象的操作。

类和继承：提供了更类似于传统面向对象语言的类的定义和继承机制。

模块：使用 import 和 export 关键字进行模块的导入和导出。

Promise 对象：用于处理异步操作，提供了更清晰的异步编程模型。

为什么需要使用到babel-loader

值得注意的是ES6规范编写的js代码并不适用于一些老的浏览器，所以需要通过一定工具进行代码的转换处理，使得能够兼容不同的浏览器。

这里需要用到babel。这是一个js的编译器，能够将ES6新特性转换到ES5,以保证js的兼容性。

使用步骤

安装babel的相关loader npm install --save-dev babel-loader @babel/core @babel/preset-env

* @babel/core 转换js的核心库

* @babel/preset-env 是一个预设，它会根据目标环境（如浏览器或 Node.js 版本）来确定需要转换哪些新的语言特性。

* babel-loader loader和babel关联起来的工具

配置webpack.config.js

js 复制代码

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.m?js$/,
        //待处理的js文件需要排除的目录
        exclude: /(node_modules|bower_components)/,
        //当需要为loader做详细配置时，use属性是一个对象
        use: {
          //使用的loader
          loader: 'babel-loader',
          //options去配置loader
          options: {
            presets: [
              [
                //转换语言规划，针对浏览器版本来确定转换
                '@babel/preset-env',
                {
                  targets: {
                    //表示支持市场份额大于 1%的浏览器、最近的两个主要版本的浏览器以及ie版本大于8的浏览器。
                    browsers: [
                      ">1%",
                      "last 2 versions",
                      "not ie<=8"
                    ]
                  }
                }
              ]
            ]
          },
        },
      },
    ]
  }
}

5 插件

插件是为了拓展功能的。

js 复制代码

// 能够生成一个html 并自动引入打包生成的js
// 引入html-webpack-plugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  output: {
    clean: true
  },

  //plugins属性，一个数组，将引入所有需要的插件
  //想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
  plugins: [new HtmlWebpackPlugin({
    //确定生成的html的标题
    //title: 'html-webpack-plugin 插件的使用',
    //基于模板html来生成新的html.并引入打包后生成的js
    template: './src/template.html',
    // 可选：生成的 HTML 文件的文件名，默认为 'index.html'
    filename: 'y-custom-index.html',
  })],
};

6 webpack 开发服务器

Webpack 的开发服务器（webpack-dev-server）是一个非常有用的工具，用于在开发过程中提供快速的实时重新加载和热模块替换功能。

以下是一些关于 webpack-dev-server 的关键特点和配置要点：

特点：

实时重新加载：当您保存对代码的更改时，浏览器会自动刷新以显示最新的更改，无需手动刷新页面。
热模块替换（HMR）：对于某些模块的更改，只重新加载更改的模块，而不是整个页面，提供了更流畅的开发体验。
内置的静态文件服务器：可以直接访问项目中的静态资源，如图片、字体等。

使用步骤 ：

安装webpack-dev-server npm install webpack-dev-server -D

使用webpack serve --open 开启服务器，将自动去访问服务器设定的端口

7 devtool 配置

在 Webpack 配置中，devtool 选项用于控制生成的源映射（Source Map）的类型，以帮助在开发过程中更方便地调试代码。

以下是一些常见的 devtool 选项及其特点：

* eval：速度最快，但生成的源映射质量较低，不太适合复杂的调试。

* cheap-eval-source-map：速度较快，生成的源映射包含行信息，但不包含列信息，适用于大多数情况。

* cheap-module-eval-source-map：类似于 cheap-eval-source-map，但对于模块的处理更准确。

* source-map：生成完整的、准确的源映射，但构建速度较慢，适用于对调试要求非常高的情况。

* inline-source-map：将源映射嵌入到生成的代码中，而不是生成独立的源映射文件。